reactjs - MUI 5 主题 - 全局自定义排版和调色板

问题描述

使用 MUI 5，我希望在所有使用的 MUI 组件中使用ThemeProvider和createTheme设置font-family调色板。

我正在使用这个安装的mui：

npm install @mui/material @mui/styled-engine-sc styled-components

使用该Typography组件，这不起作用：

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

const theme = createTheme({
  typography: {
    fontFamily: myFontFamily,
  },
})

const MyComponent = () => (
  <ThemeProvider theme={theme}>
    <Typography>Hello, World</Typography>
  </ThemeProvider>
)

虽然这确实有效：

const theme = createTheme({
  typography: {
    fontFamily: myFontFamily,
  },
  components: {
    MuiTypography: {
      defaultProps: {
        fontFamily: myFontFamily,
      },
    },
  },
});

同样，尝试全局覆盖的背景颜色Chip，例如，设置theme.palette.primary没有应用于<Chip color="primary" />。

const theme = createTheme({
  palette: {
    primary: {
      main: myHexColor,
    },
  },
})

const MyComponent = () => (
  <ThemeProvider theme={theme}>
    <Chip label="Hello, World" color="primary" />
  </ThemeProvider>
)

我正在努力寻找一种方法来全局覆盖这些样式，而不必将它们应用于我们想要使用的每个组件和组件变体。是否有可能做到这一点？

标签： reactjsmaterial-ui

一个朋友帮我解决了这个问题。事实证明，我错过了有关如何用作样式引擎的Styled Engine 指南styled-components的文档。我没有走那条路，而是只安装@emotion/react了无论如何@emotion/styled都包含在内的东西。react-select

reactjs - MUI 5 主题 - 全局自定义排版和调色板

问题描述

解决方案

推荐阅读