Question

我是Material-ui的新手，并做出了反应..我从材料到材料都遵循着guide 我自定义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.
  },
});

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

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

Answer 1

您使用的是哪个版本的React和material-ui？

从4.2.1版开始...

一个关于themeprovider如何工作的很好的例子是在她的https://material-ui.com/customization/themes/

的material-ui文档中。

如果进入Palette API文档，您将看到在主题提供程序中设置primary和secondary颜色时，您将为整个应用程序设置色调。例如，如果要创建一个按钮并将颜色设置为原色，则将从主题提供者那里接收原色。

这直接来自material-ui ...

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { purple } from '@material-ui/core/colors';
import Button from '@material-ui/core/Button';

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

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </ThemeProvider>
  );
}

当涉及到每个组件的特定样式时，可以通过多种方法来完成。我将以AppBar为例。在找到here的API文档之后，您可以直接通过常见的CSS / scss设置颜色，可以使用替代，也可以使用在主题提供程序中创建的主要/辅助颜色。

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

答案是可以的，但是您不必使用它。 Material-UI是轻松创建样式组件的好工具。在过去的两年中，它们已经走了很长一段路，使组件自定义变得越来越容易。覆盖是一个很好的例子。大多数material-ui组件都建立在其他material-ui组件上。这可能会导致造型困难。但是使用新的覆盖功能，您可以轻松覆盖子组件。 overrides

上的文档

希望这会有所帮助！

Answer 2

感谢您分享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）

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

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

2 个答案: