reactjs - Material -UI React : Global theme override for Paper component

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 中添加通用主题规则。欢迎您看看/尝试一下...