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

Question

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

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

我查阅了有关该主题的Material-UI 文档，据我所知，以下代码应该正确覆盖 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>
    );
  }
}

这样，PaperReact 渲染的任何组件都将拥有您的 CSS。

顺便说一句，我创建了MUI 原理图模块，它添加了 Material UI 支持，自动生成了几个 Material UI 组件并在App.js. 欢迎您查看/尝试...