如何在Material UI v5（TypeScript）中访问palette.secondary.light？

方法1：使用useTheme钩子（函数组件） #

在demo.tsx里，通过Material-UI的useTheme钩子直接获取主题颜色，再应用到按钮上：

1. 导入useTheme：

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

2. 在组件内获取主题对象：

const theme = useTheme();

3. 将颜色值赋值给按钮样式：

<Button 
  variant="contained" 
  style={{ backgroundColor: theme.palette.secondary.light }}
>
  登录
</Button>

方法2：使用makeStyles/styled定义样式 #

用makeStyles的示例： #

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  loginBtn: {
    backgroundColor: theme.palette.secondary.light,
    '&:hover': {
      backgroundColor: theme.palette.secondary.main,
    }
  }
}));

// 组件内调用
const classes = useStyles();
<Button variant="contained" className={classes.loginBtn}>登录</Button>

用styled的示例： #

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

const LoginBtn = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.light,
  '&:hover': {
    backgroundColor: theme.palette.secondary.main,
  }
}));

// 组件内使用
<LoginBtn variant="contained">登录</LoginBtn>

方法3：类组件用withTheme高阶组件 #

如果是类组件，通过withTheme注入主题：

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

class LoginComp extends React.Component {
  render() {
    const { theme } = this.props;
    return (
      <Button 
        variant="contained" 
        style={{ backgroundColor: theme.palette.secondary.light }}
      >
        登录
      </Button>
    );
  }
}

export default withTheme(LoginComp);

额外注意事项 #

确保theme.tsx里已正确配置palette.secondary的light值：

// theme.tsx
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    secondary: {
      light: '#你的浅色值',
      main: '#你的主色值',
      dark: '#你的深色值',
    },
  },
});

export default theme;

同时根组件要通过ThemeProvider包裹，保证子组件能访问到主题：

import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的页面组件 */}
    </ThemeProvider>
  );
}

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