Where is the best place to declare material ui styles?

Question

React

Please tell me where it is better to declare material ui styles and how to optimize the application using minimal calls to mui

import { createStyles, Grid, IconButton, List, ListItem, makeStyles, Paper, Theme, Typography } from '@material-ui/core'
import React from 'react'
import { ContactsType, ProfileType } from '../../../../types/types'
import ProfileStatus from './ProfileStatus'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import { generateIcon } from '../../../../utils/generateIcons'
import { Accordion, AccordionDetails, AccordionSummary } from '../../../custom/accordion'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    dataWrap: {
      backgroundColor: theme.palette.background.paper,
      border: '1px solid rgba(255, 255, 255, 0.12)',
      padding: theme.spacing(1.2),
      color: theme.palette.text.secondary,
    },
    name: {
      textTransform: 'uppercase',
      marginLeft: theme.spacing(1),
    },

    gutters: {
      marginBottom: theme.spacing(2),
      marginLeft: '12px',
    },
    accordion: {
      color: theme.palette.text.secondary,
    },
    '& .MuiIconButton-root': {
      root: {
        color: 'red',
      },
    },
  })
)

type ProfileDataPropsType = {
  profile: ProfileType
  isOwner: boolean
  setStatus: (status: string) => void
  status: string
}

const ProfileData: React.FC<ProfileDataPropsType> = ({ profile, isOwner, setStatus, status }) => {
  const classes = useStyles()

  return (
    <Paper className={classes.dataWrap}>
      <Typography gutterBottom variant={'h6'} className={classes.name}>
        {profile.fullName}
      </Typography>

      <ProfileStatus isOwner={isOwner} status={status} setStatus={setStatus} />

      <Typography className={classes.gutters} variant={'subtitle1'}>
        Looking for a job: {profile.lookingForAJob ? 'yes' : 'no'}
      </Typography>

      {profile.lookingForAJob && (
        <Typography className={classes.gutters} variant={'subtitle1'}>
          My professional skills: {profile.lookingForAJobDescription}
        </Typography>
      )}

      <Typography className={classes.gutters} variant={'subtitle1'}>
        About me: {profile.aboutMe}
      </Typography>

      <Accordion className={classes.accordion}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon className={classes.accordion} />}
          aria-controls='panel1a-content'
          id='panel1a-header'
        >
          <Typography>Contacts:</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container justify='space-between'>
            {Object.keys(profile.contacts).map((key) => {
              return (
                <Contact
                  key={key}
                  contactIcon={generateIcon(key)}
                  contactLink={profile.contacts[key as keyof ContactsType]}
                />
              )
            })}
          </Grid>
        </AccordionDetails>
      </Accordion>
    </Paper>
  )
}

type ContactPropsType = {
  contactIcon: any
  contactLink: any
}

const Contact: React.FC<ContactPropsType> = ({ contactIcon, contactLink }) => {
  return (
    <a href={contactLink}>
      <IconButton disabled={!contactLink}>{contactIcon}</IconButton>
    </a>
  )
}

export default ProfileData