在MUI项目中如何在CSS样式中调用theme主题的配置属性值

实现方案 #

以下是MUI生态下几种常用的可行实现方式，按需选择即可：

方式1：使用sx属性（最简便，推荐） #

MUI的sx属性天生支持直接读取ThemeProvider下的theme对象，无需额外引入其他依赖，直接修改Footer组件即可：

const Footer= () => {
  return (
    <div 
      className="pageFooter"
      sx={{
        borderTop: '2px solid',
        borderColor: 'primary.main'
      }}
    >Footer Text</div>
  );
};

export default Footer;

方式2：使用styledAPI创建样式组件 #

如果样式逻辑复杂、需要复用，可以用MUI的styled方法创建自定义组件：

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

const StyledFooter = styled('div')(({ theme }) => ({
  borderTop: `2px solid ${theme.palette.primary.main}`
}));

const Footer= () => {
  return (
    <StyledFooter className="pageFooter">
      Footer Text
    </StyledFooter>
  );
};

export default Footer;

方式3：使用useTheme钩子手动获取主题值 #

如果需要自主控制样式绑定逻辑，可以先通过useTheme拿到主题对象，再绑定到内联样式或其他样式方案中：

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

const Footer= () => {
  const theme = useTheme();
  return (
    <div 
      className="pageFooter"
      style={{ borderTop: `2px solid ${theme.palette.primary.main}` }}
    >Footer Text</div>
  );
};

export default Footer;

方式4：CSS文件中使用MUI暴露的CSS变量 #

如果一定要用独立CSS文件实现，MUI v5默认会把主题配置暴露为全局CSS变量，直接调用即可和主题值同步：

.pageFooter {
  border-top: 2px solid var(--mui-palette-primary-main);
}

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