MUI v5 如何实现样式代码与组件文件的分离存放

方案1：使用官方主推的 styled API（零额外依赖，推荐） #

这是MUI v5 最推荐的原生方案，类型支持完善，和MUI生态适配最优。

样式文件 Page.style.js 代码： #

import { styled } from '@mui/material/styles'

// 定义样式化组件，可直接通过参数获取MUI主题变量
export const PageRoot = styled('div')(({ theme }) => ({
  background: "white",
  // 示例：使用主题变量 padding: theme.spacing(3)
}))

组件文件 Page.js 代码： #

import React from "react";
import { PageRoot } from "./Page.style";

const Page = () => {
  return <PageRoot>页面内容</PageRoot>
}

export default Page

方案2：使用 TSS React 兼容原有 makeStyles 用法（迁移成本最低） #

如果不想大幅修改v4版本的旧代码，可以用MUI官方推荐的TSS React库，用法和原有makeStyles几乎一致。

前置依赖安装： #

npm install tss-react @emotion/react

样式文件 Page.style.js 代码： #

import { makeStyles } from 'tss-react/mui'

export const useStyles = makeStyles()({
  root: {
    background: "white",
  },
})

组件文件 Page.js 代码： #

import React from "react";
import { useStyles } from "./Page.style";

const Page = () => {
  // 仅此处和v4用法有差异：返回值解构取classes
  const { classes } = useStyles();
        
  return <div className={classes.root}>页面内容</div>
}

export default Page

方案3：抽离样式对象配合 sx prop使用（适合轻量场景） #

如果样式逻辑简单，可以直接抽离样式对象，配合MUI原生的sx prop使用，无需额外API。

样式文件 Page.style.js 代码： #

export const pageStyles = {
  root: {
    background: "white",
  }
}

组件文件 Page.js 代码： #

import React from "react";
import { pageStyles } from "./Page.style";

const Page = () => {
  return <div sx={pageStyles.root}>页面内容</div>
}

export default Page

内容的提问来源于stack exchange，提问作者Yahli Gitzi