如何让自定义div组件使用随MUI主题模式自动切换的primary主色调

方案1：使用MUI内置的sx属性（最推荐） #

MUI的sx属性天生支持主题变量自动适配，不需要手动判断模式，原生支持响应主题变化。你可以直接指定调色板路径，也可以自定义不同模式下的取值映射：

• 如果是直接用固定的primary层级色值（比如不管明暗模式都用primary.main，自动适配主题定义的明暗模式下的main色），写法直接简化为：

<div sx={{ backgroundColor: 'primary.main' }}>
  Test
</div>

• 如果你需要亮模式用primary.dark、暗模式用primary.light的自定义映射，也可以直接通过函数语法拿到theme判断，比内联style更简洁：

<div sx={{ 
  backgroundColor: theme => theme.palette.mode === 'light' 
    ? 'primary.dark' 
    : 'primary.light' 
}}>
  Test
</div>

sx属性会自动监听主题变化，切换模式时实时更新颜色，完全和原生MUI组件行为一致。

方案2：使用styled API封装自定义组件 #

如果这个div是复用性很高的组件，可以用MUI的styled API封装，同样自动适配主题：

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

const CustomCard = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'light'
    ? theme.palette.primary.dark
    : theme.palette.primary.light
}));

// 使用时直接调用即可，不需要额外处理
<CustomCard>Test</CustomCard>

方案3：封装自定义工具Hook（如果必须用原生style属性） #

如果你的场景不能用sx或者styled，必须用原生的style属性，可以封装一个专用Hook来简化判断：

import { useTheme } from '@mui/material/styles';

const usePaletteColor = (colorKey, lightShade = 'main', darkShade = 'main') => {
  const theme = useTheme();
  return theme.palette.mode === 'light'
    ? theme.palette[colorKey][lightShade]
    : theme.palette[colorKey][darkShade];
}

// 使用时
function YourComponent() {
  const primaryBg = usePaletteColor('primary', 'dark', 'light');
  return <div style={{ backgroundColor: primaryBg }}>Test</div>
}

注意：你想要的theme.palette.primary直接赋值的写法无法原生实现，因为theme.palette.primary是一个包含main/light/dark/contrastText的对象，不是合法的CSS颜色值，必须指定具体的色值字段，通过上面的封装方法可以在减少重复代码的前提下实现自动切换效果。

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