How to use the @material-ui/styles.makeStyles function in @material-ui/styles

/* eslint-disable max-len */
import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(({ palette, shadows }) => ({
  root: {
    position: 'relative',
    paddingLeft: 16,
    paddingRight: 16,
    background:
      'linear-gradient(to right, #aea0d5, #eaafc8)' /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */,
    boxShadow: '0 0 20px 0 #f5005780',
    animation: 'mui-ripple-pulsate 1s infinite',
  },
  label: {
    color: palette.common.white,
    textTransform: 'none',
    fontSize: 15,
    fontWeight: 700,
  },
  contained: {

// @flow
import React, { useMemo } from "react"
import BaseCell from "../BaseCell"
import Select from "react-select"
import { grey, blue } from "@material-ui/core/colors"
import { makeStyles } from "@material-ui/styles"
import { softenColor } from "../../colors"

const useStyles = makeStyles({
  tagContainer: { display: "flex" },
  tag: {
    margin: 4,
    padding: 4,
    paddingLeft: 6,
    paddingRight: 6,
    borderRadius: 4
  }
})

export const customStyles = {
  container: provided => ({
    ...provided,
    border: "none",
    backgroundColor: blue[50]
  }),

import * as React from 'react';
import classNames from 'classnames';

import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import TopBarContext from './TopBarContext';
import Typography from '@material-ui/core/Typography';

import {makeStyles} from '@material-ui/styles';

const DRAWER_WIDTH = 240;

const useStyles = makeStyles(theme => ({
  appBarSpacer: theme.mixins.toolbar,
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: DRAWER_WIDTH,
    width: `calc(100% - ${DRAWER_WIDTH}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,

import cx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/styles';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import createHeader from '../models/header';
import createAllSidebars from '../models/allSidebars';
import { useLayoutCtx } from '../hooks';
import { transitionStyles } from '../styles';

const useStyles = makeStyles(() => ({
  root: {
    left: 0,
  },
}));

const useTransitionStyles = makeStyles(transitionStyles);

const Header = ({ className, children, style, ...props }) => {
  const ctx = useLayoutCtx();
  const headerModel = createHeader(ctx);
  const allSidebars = createAllSidebars(ctx);
  const styles = useStyles();
  const transition = useTransitionStyles();
  const theme = useTheme();
  return (

* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 */
import PropTypes from 'prop-types';
import React, { useState, useCallback, useMemo } from 'react';
import ReactSelect from 'react-select';
import { makeStyles } from '@material-ui/styles';
import Box from '@material-ui/core/Box';
import InputBase from '@material-ui/core/InputBase';

import { theme } from '../../../colors';

const unitOptions = ['μs', 'ms', 's'];

const useStyles = makeStyles({
  valueInput: {
    width: '4rem',
    height: '2.4rem',
    display: 'flex',
    alignItems: 'center',
    color: theme.palette.primary.contrastText,
    padding: '0 0.4rem',
  },
});

const propTypes = {
  value: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
  onFocus: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  isFocused: PropTypes.bool.isRequired,

*
 * @flow
 * @format
 */
import type {ButtonProps} from '@fbcnms/ui/components/design-system/Button';
import type {Property} from '../../common/Property';
import type {PropertyType} from '../../common/PropertyType';

import React from 'react';
import Select from '@fbcnms/ui/components/design-system/Select/Select';
import classNames from 'classnames';
import update from 'immutability-helper';
import {isJSON} from '@fbcnms/ui/utils/displayUtils';
import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles(() => ({
  input: {
    width: '300px',
    display: 'flex',
  },
  container: {
    display: 'flex',
    width: '250px',
  },
}));

type Props = {|
  className: string,
  property: T,
  onChange: T => void,
  ...ButtonProps,
|};

import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
import MoneyIcon from '@material-ui/icons/Money';

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%'
  },
  content: {
    alignItems: 'center',
    display: 'flex'
  },
  title: {
    fontWeight: 700
  },
  avatar: {
    backgroundColor: theme.palette.error.main,
    height: 56,
    width: 56
  },
  icon: {

import {colors} from '../../theme/default';
import {getLabelUnit, getPromValue} from './SubscriberUtils';
import {getStep, getStepString} from '../../components/CustomMetrics';
import {makeStyles} from '@material-ui/styles';
import {useEffect, useState} from 'react';
import {useEnqueueSnackbar} from '@fbcnms/ui/hooks/useSnackbar';
import {useRouter} from '@fbcnms/ui/hooks';

export type DateTimeMetricChartProps = {
  title: string,
  queries: Array,
  legendLabels: Array,
  unit?: string,
};

const useStyles = makeStyles(_ => ({
  dateTimeText: {
    color: colors.primary.comet,
  },
}));

type DatasetFetchProps = {
  networkId: network_id,
  subscriberId: subscriber_id,
  start: moment,
  end: moment,
  enqueueSnackbar: (
    msg: string,
    cfg: EnqueueSnackbarOptions,
  ) => ?(string | number),
};

* This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import React from 'react';
import Select from '@material-ui/core/Select';
import {makeStyles} from '@material-ui/styles';
import type {TimeRange} from '@fbcnms/ui/insights/AsyncMetric';

const useStyles = makeStyles(_ => ({
  outlined: {
    color: 'red',
  },
}));

type Props = {
  variant: string,
  value: TimeRange,
  label?: string,
  onChange: TimeRange => void,
  className: string,
};

export default function TimeRangeSelector(props: Props) {
  const classes = useStyles();
  return (

import {Route} from 'react-router-dom';

import nullthrows from '@fbcnms/util/nullthrows';
import useMagmaAPI from '@fbcnms/ui/magma/useMagmaAPI';
import withAlert from '@fbcnms/ui/components/Alert/withAlert';
import {makeStyles} from '@material-ui/styles';
import {useRouter} from '@fbcnms/ui/hooks';
import {useState} from 'react';

import {
  BITRATE_MULTIPLIER,
  DATA_PLAN_UNLIMITED_RATES,
  DEFAULT_DATA_PLAN_ID,
} from './DataPlanConst';

const useStyles = makeStyles((theme: Theme) => ({
  rowIcon: {
    display: 'inline-block',
    ...theme.mixins.toolbar,
  },
}));

type Props = WithAlert & {};

function DataPlanConfig(props: Props) {
  const classes = useStyles();
  const {match, history, relativePath, relativeUrl} = useRouter();
  const [config, setConfig] = useState();

  const {isLoading} = useMagmaAPI(
    MagmaV1API.getLteByNetworkIdCellularEpc,
    {networkId: nullthrows(match.params.networkId)},