背景

Question

背景

我在应用程序中使用Material ui和Styled components一起绘制。我已阅读了有关使用样式化组件对Material ui组件进行样式设置的文档，并使其可用于多个简单组件。

问题

更改背景颜色不符合我的预期。只是在样式化的组件中添加样式似乎会在错误的级别应用样式。

我尝试过的

import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components';

const StyledDrawer = styled(Drawer)`
        background-color: red;
`;

结论

从我所看到的，我需要对称为Paper组件的内部部分进行样式设置。我看不到使用样式化组件来做到这一点的方法。

问题

是否可以在带有样式组件的材料用户界面抽屉中对此隐藏的纸张组件进行样式设置？

Answer 1

要为抽屉中的内部组件（或其他类似方式的组件）设置样式，您必须覆盖所需组件的类名，这是使用方法：

https://material-ui.com/customization/overrides/#overriding-with-classes

要更快：您只需像创建其他任何组件一样创建样式，然后就可以

<Drawer classes={{ paper: classes.theNameOfTheStyleClass }} />

通过这种方式，您可以覆盖特定组件的样式（论文一）。

在组件的API中，您可以检查可以覆盖哪些类。

这里是Drawer API：https://material-ui.com/api/drawer/#css-api

希望它可以帮助您：3

Answer 2

是的，您是正确的-您的样式可以使用，但是由于纸张样式更具体而被覆盖。

是的，您可以通过对抽屉下方的div进行样式设置来使用样式组件来做到这一点：

const StyledDrawer = styled(Drawer)`
  & > div {
    background-color: red;
  }
`;

这是一个有效的代码笔：https://codesandbox.io/embed/50mp1nnx94?fontsize=14

您不能使用类名称执行此操作，因为它们是在运行时生成并插入的，因此“ paper”类实际上将被称为“ MuiDrawer-paper-2579”之类的名称，您不会事先知道该数字

如何使用样式组件设置材质用户界面抽屉组件的背景色？

背景

问题

我尝试过的

结论

问题

2 个答案: