MUI v5中useStyles(makeStyles)替代方案及样式兼容写法

许多存量系统组件采用如下v4版本的写法做样式定义：

import React from "react";
import { makeStyles } from "@mui/styles";
import FormControl from "@mui/material/FormControl";

const useStyles = makeStyles((theme) => ({
    formControl: {
        color:props=>props.color || 'black',
        margin: '17px 8px 8px 8px',
        '& .MuiFormLabel-root': {
            top:'-19px !important',
        },
    },
}));

const FieldText=()=>{
    const classes = useStyles()

    return (
        <FormControl className={classes.formControl}>
           <input type="text" />
        </FormControl>
    )
}

export {FieldText}

Material-UI升级至v5版本后，必须在根组件配置ThemeProvider才能正常运行样式逻辑，升级后常见报错如下：

要在尽量保持原有样式结构的前提下，同时支持嵌套内部组件选择器、props动态样式两个核心能力，最优方案是使用MUI v5原生的styled API做适配，改动量极小，且是官方长期维护的标准方案。

具体实现步骤 #

1. 先在项目根组件完成ThemeProvider配置，初始化自定义theme实例并完成根组件包裹，这是v5版本的强制基础要求。
2. 替换原有makeStyles写法为styled定义样式组件，适配后的代码如下：

import React from "react";
// 从@mui/material/styles引入styled方法
import { styled } from "@mui/material/styles";
import FormControl from "@mui/material/FormControl";

// 生成带样式的FormControl组件，配置shouldForwardProp过滤自定义props，避免DOM属性警告
const StyledFormControl = styled(FormControl, {
  shouldForwardProp: (prop) => prop !== "color"
})(({ theme, color = "black" }) => ({
  // 动态props样式直接从入参解构获取，逻辑和原有写法一致
  color: color,
  margin: '17px 8px 8px 8px',
  // 嵌套选择器写法和v4完全相同，不需要调整原有选择器逻辑
  '& .MuiFormLabel-root': {
    top:'-19px !important',
  },
}));

const FieldText = (props) => {
  // 直接将props传入样式组件即可动态生效
  return (
    <StyledFormControl {...props}>
       <input type="text" />
    </StyledFormControl>
  )
}

export {FieldText}

方案优势 #

• 原有嵌套选择器逻辑零修改，所有&开头的内部组件选择规则可以直接复用
• 动态props样式逻辑和原有开发体验一致，支持根据传入组件的任意属性计算样式值
• 属于MUI v5原生核心能力，不存在后续版本兼容废弃风险，比继续使用v4遗留的@mui/styles包更稳定
• 不需要额外引入第三方样式库，打包体积更优

如果项目存量组件量级太大，需要做过渡兼容，也可以单独安装@mui/styles依赖包，配合根组件的ThemeProvider配置继续使用原有makeStyles写法，但这只是临时过渡方案，官方不会再为这个包追加新特性，长期维护还是建议迁移到styled写法。

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