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

Question

我想为我们使用 ThemeProvider 的应用程序添加全局背景颜色。我看到我无法弄清楚的奇怪情况。在下面的图片中您可以看到 body 组件不会“捕获”应用程序的整个组件，还请查看 devtools 中的 body 属性，backgroundColor 和颜色（为测试添加）与我添加到代码中的不同 below.Component with text:"Wybierz koło..." 是有条件地呈现的，这就是为什么我想全局制作 backgroundColor 属性以涵盖这种情况。

MainTheme 是这样构建的：

 components: {
    MuiCssBaseline: {
        styleOverrides: {
            '@global': {
                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',
                },
            },
        },
    },

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

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

);

这个条件组件是根据displayTooltipText渲染的

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

非常感谢！

Answer 1

您需要删除 '@global': { 包装层。您可以看到 here how the default styles are defined and overrides need to be defined in the same way. Those styles (the defaults plus your overrides), then get passed to the GlobalStyles component 处理全局范围。

这是一个工作示例：

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>
  );
}

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

how to apply global backgroundColor using MuiCssBaseline and styleOverrides

reactjs

material-ui

styled-components