时间戳

首页 > 解决方案 > 使用material-ui CSS的正确方法是什么？

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

问题描述

我是 material-ui 的新手并做出反应 .. 我正在遵循从材料到自定义 css 的本指南。

当我尝试为示例建模时

我得到关注

Cannot read property 'prepareStyles' of undefined

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

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

以下代码是否告诉材料主题上的所有组件都使用此调色板？

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() ？

如果有人可以看一下我的代码引脚并为我提供一个示例来设置我的 Button 和 AppBar 的样式，我将非常感激

标签： javascriptcssreactjsmaterial-ui

解决方案

感谢您的分享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.20API 发生了翻天覆地的变化。因此，请按照文档了解最新信息。

material-ui 的文档位于此处。确保文档将您指向最新版本。（见右上角，当前版本为4.2.1）

我已经叉了你的笔，请参阅工作示例

推荐阅读