React/Material UI组件样式定制常见方案及最优实现方式咨询

其他可用的MUI样式定制方案 #

• sx 属性方案（MUI v5+ 官方首推）
  sx 是 MUI 原生支持的快捷样式属性，既可以直接读取全局主题变量，也支持通过后代选择器修改组件内部子元素的样式，单文件内临时调整样式非常灵活，示例：

<BottomNavigation
  sx={{
    height: 60,
    width: "100%",
    bgcolor: "secondary.dark", // 直接读取theme中定义的配色变量
    '& .MuiBottomNavigationAction-label': {
      fontSize: '12px' // 直接修改内部子组件的对应类名样式
    }
  }}
>
  <BottomNavigationAction label="Dashboard" icon={<WbSunnyOutlinedIcon />} />
</BottomNavigation>

• styled 组件方案
  用 MUI 封装的 styled API 可以创建可复用的自定义样式组件，适合需要在多页面复用的定制组件场景，示例：

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

const CustomBottomNav = styled(BottomNavigation)(({ theme }) => ({
  height: 60,
  width: "100%",
  backgroundColor: theme.palette.secondary.dark,
  '& .MuiBottomNavigationAction-label': {
    fontSize: '12px'
  }
}));

// 业务代码中直接调用即可
function Menu() {
  return <CustomBottomNav />
}

• 优化后的全局主题方案
  你提到的A方案无法复用变量的问题是写法导致的，createTheme 支持先定义公共变量再传入配置，也支持在styleOverrides中通过回调读取已定义的主题变量，修改后即可解决变量复用问题：

const primaryMain = "#000";
const theme = createTheme({
  palette: {
    primary: {
      main: primaryMain,
    }
  },
  components: {
    MuiBottomNavigation: {
      styleOverrides: {
        root: ({ theme }) => ({
          backgroundColor: theme.palette.primary.main, // 直接复用已定义的主题变量
        })
      }
    }
  }
});

MUI 组件样式定制最佳实践 #

按照不同的使用场景选择对应方案即可：

1. 全项目通用的组件样式统一规范 → 优先用优化后的全局主题方案，一次配置全项目生效，符合设计系统的统一管控要求
2. 多页面复用的自定义业务组件 → 优先用styled API封装，类型提示完整，复用性高
3. 单页面/单组件内的临时样式调整 → 优先用sx属性，不需要额外声明类名，灵活度最高
4. 需要搭配全局CSS/预处理器（Less/Sass等）的场景 → 可以放心用C方案的classes属性注入自定义类名，这是MUI官方开放的标准能力，完全不违背MUI的设计原则
5. 仅MUI v4版本可以用B方案的makeStyles，v5版本已经将makeStyles标记为废弃，不再推荐使用，且makeStyles也可以通过写后代选择器实现内部类名样式调整，只是有更优的替代方案

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