Question

我有一个使用最新Material-UI组件库构建的React应用。

我使用了Paper组件的许多实例。我想一次将边距和填充应用于所有边距，而无需为每个实例手动重复此过程。

我查看了该主题的Material-UI documentation，据我所知，以下代码应该正确覆盖了Paper的外观：

const theme = createMuiTheme({
    overrides: {
        Paper: {
            root: {
                padding: '10px',
                marginBottom: '10px',
            },
        },
    },
});

下面是应应用覆盖样式：

<ThemeProvider theme={theme}>
    {/* ... */}
    <Paper>
        Content goes here
    </Paper>
    {/* ... */}
</ThemeProvider>

但是没有应用覆盖的值。有什么建议吗？

谢谢！

Answer 1

在您的App.js中添加（请注意MuiPaper而非Paper）：

const theme = createMuiTheme({
  overrides: {
    MuiPaper: {
      root: {
        padding: '10px',
        marginBottom: '10px'
      },
    },
  }
});

在同一App.js文件中，包装HTML：

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div className="App">
          <YourComponent1 />      
          <YourComponent2 />
          ...
        </div>
      </MuiThemeProvider>
    );
  }
}

这样，React渲染的任何Paper组件都将具有您的CSS。

顺便说一句，我创建了MUI schematics模块，该模块添加了Material UI支持，自动生成了多个Material UI组件，并在App.js中添加了常规主题规则。欢迎您来看看/尝试...

Answer 2

如果您已经将 CssBaseline 组件用于全局重置，您也可以使用它...这一切都取决于您如何构建主题。

例如以下来自 Mui 文档：

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          WebkitFontSmoothing: 'auto',
        },
      },
    },
  },
});
      

 // ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

您可以从此处的文档中获取更多详细信息 using CssBaseline to inject global theme overrides.

Answer 3

我发现了问题。

用于CSS的内部组件名称是MuiPaper，而不仅仅是Paper。以下将产生预期的结果：

overrides: {
    MuiPaper: {
        root: {
            padding: '10px',
            marginBottom: '10px',
        },
    },
},

Material-UI React：纸张组件的全局主题覆盖

3 个答案: