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

【问题标题】：MUI 5 theme - globally customize typography and color paletteMUI 5 主题 - 全局自定义排版和调色板
【发布时间】：2021-12-01 11:44:05
【问题描述】：

使用 MUI 5，我希望使用 ThemeProvider 和 createTheme 在所有使用的 MUI 组件中设置 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>
)

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

【问题讨论】：

你的起始框架是什么，create-react-app、next.js等？
我在使用 CRA 时遇到了同样的问题 - 我已尽一切努力使排版不那么庞大。
我正在使用 React 和 Node.js。根据我在下面找到的答案，我认为这里的问题与 mui 样式引擎有关。

标签： reactjs material-ui

【解决方案1】：

一位朋友帮我解决了这个问题。事实证明，我错过了Styled Engine guide 上关于如何使用styled-components 作为样式引擎的文档。我最终没有走这条路，而是安装了@emotion/react 和@emotion/styled，它们无论如何都包含在react-select 中。

【讨论】：

如果您使用的是 Material-UI，那么我不知道您为什么需要像 react-select 这样的额外库。
对不起，我不是说有必要。我的意思是因为我已经将 react-select 作为依赖项，其中包括 @emotion 包，添加 @emotion 包不会影响我的应用程序的捆绑包。
我相信 Material-UI v5 已经在使用@emotion。从 v4 到 v5，@emotion 是 v5 的默认样式库。
对，但是文档说您也可以使用styled-components 而不是@emotion，所以我想我会使用它，因为我们已经在使用styled-components，但我没有读到罚款打印。 -_-

【解决方案2】：

我很确定这对你有用。

// App.js
import React from 'react';
import { createTheme } from '@mui/material/styles';
import { StylesProvider } from '@mui/styles';

const App = () => {
  const theme = createTheme({
    palette: {
      primary: {
        main: '#000',
      },
      secondary: {
        main: '#fff',
      },
      // whatever colors you want to include
      // Please refer to the following for more details
      // https://mui.com/customization/default-theme/#explore
    },
    // Here you could add global styles what you exactly want
    component: {
      typography: {
        styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontFamily: myFontFamily,
          // regarding the code you posted, there is no props like fontFamily, so you can't add it to the defaultProps, you can look into the Typography APIs
          https://mui.com/api/typography/#props
        },
      },
      chip: {
        root: {
          backgroundColor: someColor
          // color props should work color="primary" and be applied the primary color #000
        }
      }
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <StylesProvider>
        {/* children */}
      </StylesProvider>
    </ThemeProvider>
  );
};

export default App;

您不需要为子组件包含ThemeProvider，只需将它用于根元素，特别是App.js。

我的意思是使用一个ThemeProvider 和一个主题对象就足够了。

如果你想自定义一个特定的组件，那么请为组件使用 classes 和 classname props。 https://mui.com/styles/advanced/#makestyles

【讨论】：