Material UI中ThemeProvider设置Paper背景色不生效问题

Paper 组件没有内置 backgroundColor 属性，你传入的 backgroundColor="primary" 不会被组件解析，最终只会作为无效DOM属性挂在元素上，自然无法生效。Button 组件能正常识别 color="primary" 是因为组件本身做了主题色映射逻辑，Paper 没有这套默认实现。

以下方案均基于 MUI v5 版本实现，和你当前的项目依赖匹配：

• 方案1：使用sx属性（官方推荐，单场景使用最简便）
  sx是MUI内置的样式系统入口，可以直接访问主题变量，不需要额外封装：

  <Paper 
    elevation={10} 
    sx={{
      bgcolor: 'primary.main', // 自动映射到createTheme中定义的primary主色
      color: 'primary.contrastText', // 可选：同步设置适配主色的文字颜色
      height: 75, 
      width: 75
    }}  
  />
  

  其中bgcolor是backgroundColor的简写，MUI会自动识别primary.main这类主题令牌，替换为你配置的实际色值。

• 方案2：用styled封装复用组件（多场景重复使用推荐）
  如果你项目里多处需要主色背景的Paper，可以提前封装成自定义组件，避免重复写样式：

  import { styled } from '@mui/material/styles'
  
  const PrimaryBgPaper = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  }))
  
  // 使用时直接调用，和原生Paper用法一致
  <PrimaryBgPaper elevation={10} sx={{ height: 75, width: 75 }} />
  

• 方案3：给Paper挂载Box系统属性
  如果你习惯直接在组件属性上写样式，可以给Paper传入component={Box}，让它继承Box组件的所有样式系统属性支持：

  <Paper 
    component={Box}
    elevation={10} 
    bgcolor="primary.main"
    color="primary.contrastText"
    sx={{ height: 75, width: 75 }}
  />
  

• 你代码中引入了CssBaseline但没有在ThemeProvider内部渲染，建议添加，用来抹平不同浏览器的默认样式差异：

  <ThemeProvider theme={defaultTheme}>
    <CssBaseline />
    {/* 其余业务组件 */}
  </ThemeProvider>
  

• 你引入了responsiveFontSizes工具但没有调用，如果需要实现字号随屏幕尺寸自适应，可以把创建的主题做一层包装再传入：

  let defaultTheme = createTheme({
    // 你原有的调色板配置
  })
  defaultTheme = responsiveFontSizes(defaultTheme)
  

• 不建议用原生style属性写主题相关样式，style内无法访问主题变量，后续调整主题色时没法全局同步修改。

内容的提问来源于stack exchange，提问作者Tej Partap Singh