如果 您 想要 使用 MUI5 和 旧 的 makeStyles 方法 ， 类似 以下 的 方法 可能 会 有所 帮助 ：
只需 创建 一 个 包含 要 使用 的 样式 的 对象 ：

const styles = {
  title: {
    color: 'blue',
  },
  description: {
    color: 'red',
  },
  content: {
    fontStyle: 'italic',
    textDecoration: 'underline',
  },
  button: {
    '&:hover': {
      fontWeight: 'bold',
    },
}
};

中 的 每 一 个
然后 在 组件 上 使用 SX 道具 中 的 每个 项目 ， 如下 所 示 ：

return (
  <div className="App">
    <Paper>
      <Typography sx={styles.title} variant="h3">Hello World</Typography>
      <Typography sx={styles.description} variant="h5">This is a description</Typography>
      <Typography sx={{...styles.content, color: 'green'}} variant="body1">
        Lorem ipsum dolor sit amet
      </Typography>
      <Button sx={styles.button} variant="contained">The Button</Button>
    </Paper>
  </div>
);

格式
请 注意 ， 在 第 三 个 示例 中 ， 如果 要 在 SX 属性 中 添加 一些 附加 内容 （ 例如 示例 中 的 绿色 ） ， 则 应 使用 spread 语法 （ ... ） 来 扩展 样式 对象 ， 并 注意 双 大 括号 以 使 其 成为 正确 的 对象 。
这个 样式 对象 就 像 一 个 普通 的 SX 道具 一样 工作 ， 用于 对子 组件 、 子类 或 伪 类 等 进行 样式 化 ， 如 按钮 示例 所 示 。

您可以在css文件中使用makeStyles，如下所示：

import { makeStyles } from '@material-ui/core'

export default makeStyles((theme) => ({
    Box: {
         width: '100%',
          height: '46px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          background: theme.palette['P-10'],
          padding: '8px 24px'

    }
    }
    )
    )

并在组件中使用它：

import useStyle from './index.styles'

    const classes = useStyle()

    return (
          <Box className={classes.Box} >
        );
      };