为什么 Material UI 不使用我的自定义主题调色板颜色？答案

【问题标题】：Why doesn't Material UI use my custom theme palette colors?为什么 Material UI 不使用我的自定义主题调色板颜色？
【发布时间】：2021-11-13 19:17:24
【问题描述】：

我想使用自定义调色板，以便我的网站在所有组件中使用品牌颜色。我希望能够在全球范围内访问这些自定义颜色，包括在 makeStyles 中。

这是我的主题文件：

import { createMuiTheme }  from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#467f0f'
    },
  },
});

export default theme;

这是我的组件：

import theme from './theme';

const useStyles = makeStyles(theme => ({
  title: {
    backgroundColor: theme.palette.common.white,
    borderColor: theme.palette.primary.main,
    borderRadius: theme.spacing(2),
    borderStyle: 'solid',
    borderWidth: theme.spacing(1),
    color: theme.palette.primary.main,
    fontSize: theme.spacing(4),
    margin: theme.spacing(2, 'auto'),
    padding: theme.spacing(1),
    textAlign: 'center',
    [theme.breakpoints.up('sm')]: {
      fontSize: theme.spacing(8),
    },
  },
}));

function App(): JSX.Element {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
        <Typography
          className={classes.title}
          variant='h1'
        >
          My App
        </Typography>
    </ThemeProvider>
  );
}

export default App;

没有抛出错误或 linter 警告或任何东西。但是我的自定义调色板中的颜色没有被使用。在此过程中我可能错过了什么？

【问题讨论】：

标签： material-ui themes

【解决方案1】：

它不起作用的原因是当您的ThemeProvider 与您的useStyles 位于同一组件中时。因此，您正在尝试在主题实际添加到应用程序的其余部分之前使用它。

所以您可能需要做的是将您的ThemeProvider 导入更高一级（我假设您的 index.js 文件），或者在 ThemeProvider 中有一个子组件来呈现您的孩子，这是我在下面给出的示例

import theme from './theme';

function App(): JSX.Element {
  return (
    <ThemeProvider theme={theme}>
        <AppContent/>
    </ThemeProvider>
  );
}

export default App;

const useStyles = makeStyles(theme => ({
  title: {
    backgroundColor: theme.palette.common.white,
    borderColor: theme.palette.primary.main,
    borderRadius: theme.spacing(2),
    borderStyle: 'solid',
    borderWidth: theme.spacing(1),
    color: theme.palette.primary.main,
    fontSize: theme.spacing(4),
    margin: theme.spacing(2, 'auto'),
    padding: theme.spacing(1),
    textAlign: 'center',
    [theme.breakpoints.up('sm')]: {
      fontSize: theme.spacing(8),
    },
  },
}));


function AppContent(): JSX.Element {
  const classes = useStyles();

  return (
    <Typography
      className={classes.title}
      variant='h1'
    >
      My App
    </Typography>
  );
}

还不如 createMuiTheme 试试 createTheme 似乎它在较新的版本之一中被重命名以更清楚

import { createTheme }  from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#467f0f'
    },
  },
});

export default theme;

还有一点。除了颜色、fontSize 等之外，我建议不要对排版进行太多样式设置。而是考虑将其包装在 Box 中，并使其具有 backgroundColor、borderRadius 等的样式

【讨论】：