如何为Material-UI组件设置调色板的main/light/dark不同色调

我之前也碰到过这个问题！Material-UI的color属性只接受primary、secondary、error这些预设的调色板顶级键，不能直接像color="primary.light"这么写，不过有几种简单的解决办法，结合你的调色板配置来给你演示：

首先先确认你的调色板配置（注意我修正了primary.dark的无效十六进制颜色值）：

const theme = createTheme({
  palette: {
    primary: { 
      main: "#039be5", 
      light: "#63ccff", 
      dark: "#0288d1", // 原值为无效十六进制，已修正
      contrastText: "#fafafa" 
    },
    secondary: { 
      main: "#f50057", 
      light: "#ff5983", 
      dark: "#bb002f", 
      contrastText: "#f9fbe7" 
    },
    error: { 
      main: "#f50057", 
      light: "#ff5983", 
      dark: "#bb002f", 
      contrastText: "#f9fbe7" 
    }
  }
});

方法一：直接用useTheme钩子取色（最灵活） #

通过useTheme拿到主题对象，直接访问调色板里的具体色调，用sx属性（Material-UI v5推荐）设置样式：

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

function MyComponent() {
  const theme = useTheme();
  
  return (
    <>
      {/* AppBar 使用 primary.main */}
      <AppBar position="static" sx={{ backgroundColor: theme.palette.primary.main }}>
        <h1>主色调导航栏</h1>
      </AppBar>
      
      {/* Button 使用 primary.light */}
      <Button 
        variant="contained"
        sx={{ 
          backgroundColor: theme.palette.primary.light,
          color: theme.palette.primary.contrastText,
          marginTop: 2
        }}
      >
        浅色主色调按钮
      </Button>
    </>
  );
}

方法二：在主题中扩展组件自定义变体（适合高频使用） #

如果某个组件经常用到特定色调，可以在主题配置里为它添加自定义颜色变体，之后就能像原生color属性一样使用：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  // 你的调色板配置...
  components: {
    // 给AppBar设置默认主色调
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: theme => theme.palette.primary.main
        }
      }
    },
    // 给Button添加primaryLight自定义颜色变体
    MuiButton: {
      variants: [
        {
          props: { variant: 'contained', color: 'primaryLight' },
          style: theme => ({
            backgroundColor: theme.palette.primary.light,
            color: theme.palette.primary.contrastText,
            '&:hover': {
              backgroundColor: theme.palette.primary.main
            }
          })
        }
      ]
    }
  }
});

// 使用时
function App() {
  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static">
        {/* 自动使用primary.main */}
        <h1>默认主色调导航栏</h1>
      </AppBar>
      <Button variant="contained" color="primaryLight" style={{ marginTop: 16 }}>
        浅色主色调按钮
      </Button>
    </ThemeProvider>
  );
}

方法三：用styled封装专属组件（适合复用场景） #

如果需要多次使用带固定色调的组件，可以用Material-UI的styled工具封装成自定义组件：

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

// 封装使用primary.main的AppBar
const MainPrimaryAppBar = styled(AppBar)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main
}));

// 封装使用primary.light的Button
const LightPrimaryButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.light,
  color: theme.palette.primary.contrastText,
  '&:hover': {
    backgroundColor: theme.palette.primary.main
  }
}));

// 使用时
function MyComponent() {
  return (
    <>
      <MainPrimaryAppBar position="static">
        <h1>主色调导航栏</h1>
      </MainPrimaryAppBar>
      <LightPrimaryButton variant="contained" style={{ marginTop: 16 }}>
        浅色主色调按钮
      </LightPrimaryButton>
    </>
  );
}

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