Где лучше объявлять стили material ui?

Question

[Alexander]

Подскажите пожалуйста где лучше объявлять стили material ui и как можно оптимизировать приложение используя минимальное обращение к 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