MUI4升级至5后如何跨组件复用自定义className样式，减少样板代码？

方案1：抽离复用Sx样式对象（最推荐，零额外样板） #

这是最贴合MUI 5设计思路的方案，无需引入额外依赖，天然支持TypeScript类型提示，条件拼接也非常灵活，和你期望的写法几乎一致：

1. 单独的样式TS文件中定义可复用样式：

import { SxProps, Theme } from '@mui/material/styles';

// 支持接收theme参数，和之前makeStyles的写法逻辑完全对齐
export const rootSx: SxProps<Theme> = (theme) => ({
  padding: theme.spacing(1),
  margin: 'auto',
});

// 也可以定义多组样式
export const cardSx: SxProps<Theme> = (theme) => ({
  borderRadius: theme.shape.borderRadius,
  boxShadow: theme.shadows[2],
});

2. 任意组件中直接导入使用，替换className为sx属性即可：

import { rootSx, cardSx } from './common-styles';

// 基础用法
<div sx={rootSx}>...</div>

// 条件拼接用法，sx天然支持数组格式，可叠加样式、覆盖属性
<div sx={[
  rootSx,
  cardSx,
  isDisabled ? { opacity: 0.6, pointerEvents: 'none' } : {}
]}>...</div>

方案2：使用css函数生成className字符串（适合必须用className的场景） #

如果你确实需要拿到字符串格式的类名（比如给第三方非MUI组件传类名、和现有类名逻辑兼容等），可以用MUI默认内置的css函数，不需要额外安装依赖：

1. 样式TS文件中定义：

import { css, Theme } from '@mui/material/styles';

// 支持动态theme
export const getRootClass = (theme: Theme) => css({
  padding: theme.spacing(1),
  margin: 'auto',
});

// 无动态theme依赖的静态样式可以直接生成类名
export const staticCardClass = css({
  borderRadius: 8,
  boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
});

2. 组件中使用：

import { useTheme } from '@mui/material/styles';
import { getRootClass, staticCardClass } from './common-styles';

const MyComponent = () => {
  const theme = useTheme();
  const rootClass = getRootClass(theme);
  
  return (
    <>
      <div className={rootClass}>动态theme样式</div>
      <div className={staticCardClass}>静态样式</div>
      {/* 条件拼接可以用classnames工具，或者直接模板字符串 */}
      <div className={`${rootClass} ${isActive ? staticCardClass : ''}`}>
        条件类名用法
      </div>
    </>
  )
}

这两个方案都不需要额外引入依赖，也几乎没有样板代码，完全满足你在TS文件内定义样式、多组件复用的需求。

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