javascript - material-ui CSS 的正确使用方法是什么？

Question

我是 material-ui 的新手并使用react.. 我正在关注这个 guide 从 material 到我自定义 css。

当我尝试对示例建模时

我得到关注

Cannot read property 'prepareStyles' of undefined

我理解下面是控制CSS的对象 const theme = createMuiTheme()

但它是否控制所有重要的 UI 组件？抱歉，如果这没有意义，但我只是了解如何将样式应用于 Button 和 AppBar

下面的代码是否告诉 Material 主题上的所有组件都使用这个调色板？

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] }, // Purple and green play nicely together.
    secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
  },
});

如果是这样，我将如何向 AppBar 添加自定义 CSS 规则？我是否将 CSS 添加到从 const theme = createMuiTheme() 返回的对象中 ？

如果有人可以看看我的code pin并为我提供一个样式我的 Button 和 AppBar 的示例，我将非常感激

Answer 1

感谢您分享您的codesandbox，它帮助我理解了您面临的问题。

首先，您使用的是过时的 material-ui 包 0.20.x(非常旧)，具有最新的 core 版本 4.2.x。您不能混合使用这两个包。

要解决您的问题，您必须删除 material-ui 作为依赖项。确保您没有任何 material-ui/* 导入。

要使 ThemeProvider 正常工作，您需要安装另一个依赖项。

npm install --save @material-ui/styles
// or if you use yarn
yarn add @material-ui/styles

自 0.20 以来，API 发生了翻天覆地的变化。因此，请按照文档进行更新。

material-ui 的文档位于 here .确保文档将您指向最新版本。 (见右上角，当前版本为4.2.1)

我已经 fork 了你的笔，请参阅 working example