如何使用 MuiCssBaseline 和 styleOverrides 应用全局背景颜色

Question

我想为我们使用 ThemeProvider 的应用程序添加全局背景颜色。我看到了我无法弄清楚的奇怪情况。在下面的图片中，您可以看到主体组件没有“捕获”应用程序的整个组件，另请查看开发工具中的主体道具，背景颜色和颜色（为测试而添加）与我在下面的代码中添加的不同.带有文本的组件：“Wybierz ko\xc5\x82o...”是有条件渲染的，这就是为什么我想全局设置backgroundColor属性来覆盖这种情况。

\n

\n

这就是 MainTheme 的构建方式：

\n

 components: {\n    MuiCssBaseline: {\n        styleOverrides: {\n            \'@global\': {\n                html: {\n                    fontSize: \'62.5%\' /* 62.5% of 16px = 10px */,\n                    fontFamily: \'Poppins, sans-serif\',\n                },\n                body: {\n                    margin: \'0\',\n                    color: \'red\',\n                    boxSizing: \'border-box\',\n                    fontFamily: \'Poppins, sans-serif\',\n                    backgroundColor: \'#E3E3E3\',\n                },\n            },\n        },\n    },\n

\n

在这里你可以看到App组件是如何构建的

\n

export const App: FC = () => (\n<StyledEngineProvider injectFirst>\n    <ThemeProvider theme={MainTheme}>\n        <SCThemeProvider theme={MainTheme}>\n            <CssBaseline />\n            <Router>\n                <AuthContextProvider>\n                    <Notifications />\n                    <RoutingManager />\n                </AuthContextProvider>\n            </Router>\n        </SCThemeProvider>\n    </ThemeProvider>\n</StyledEngineProvider>\n

\n

）；

\n

该条件组件是基于displayTooltipText渲染的

\n

<StyledTable {...getTableProps()}>\n                        {displayTooltipText ? (\n                            <tbody>\n                                <StyledTextWrapper>\n                                    {selectWheelText}\n                                </StyledTextWrapper>\n                            </tbody>\n                        ) : (\n                            <TableBody\n                                getTableBodyProps={getTableBodyProps}\n                                prepareRow={prepareRow}\n                                rows={rows}\n                            />\n                        )}\n                    </StyledTable>\n

\n

多谢 ！

\n

Answer 1

您需要去除'@global': {包装层。您可以在此处了解如何定义默认样式以及需要以相同方式定义覆盖。这些样式（默认值加上您的覆盖）然后被传递到处理全局范围的GlobalStyles 组件。

这是一个工作示例：

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        html: {
          fontSize: "62.5%" /* 62.5% of 16px = 10px */,
          fontFamily: "Poppins, sans-serif"
        },
        body: {
          margin: "0",
          color: "red",
          boxSizing: "border-box",
          fontFamily: "Poppins, sans-serif",
          backgroundColor: "#E3E3E3"
        }
      }
    }
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div>Hello World</div>
    </ThemeProvider>
  );
}