为什么 CSS 不能正确应用于 React Material Web 组件中的按钮？答案

【问题标题】：Why CSS is not applying correctly to button in react material web components?为什么 CSS 不能正确应用于 React Material Web 组件中的按钮？
【发布时间】：2019-06-22 22:25:32
【问题描述】：

我是 React 新手，我对与 rwmc 组件相关的 CSS 样式有些困惑。

我只是通过从 '@rmwc/button' 包中导入它来在网页上呈现两个 Button 组件。我正在关注本教程

https://jamesmfriedman.github.io/rmwc/buttons

我还为此组件导入了材料设计，例如

导入'@material/button/dist/mdc.button.css'；

现在我的屏幕上有两个按钮，对于其中一个按钮组件，我提到了 className 属性。在那个类中，按钮颜色刚刚变红，工作正常，但我在这里想知道，除了改变按钮的颜色之外，在 mdc.button.css 中定义的所有其他 css 也只是被应用到这个，我不知道为什么是这样吗，这是正确的行为吗？

我问这个是因为我在这里读到了

https://jamesmfriedman.github.io/rmwc/styling-theming

所有组件上都有material-components-web classNames，您可以添加自己的，这意味着您正在更改主类。

任何帮助将不胜感激。

代码：

import React from 'react';
import ReactDOM from 'react-dom';

import { DrawerHeader } from '@rmwc/drawer';
import { Button, ButtonIcon } from '@rmwc/button';

import '@material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'

const MyComponent = props => (
  <div>
      <Button>Default</Button>
      <Button className="myDrawerHeader">Default2</Button>
  </div>
);

ReactDOM.render(<MyComponent />, document.getElementById('root'));

index.css

.myDrawerHeader {
      color: red !important;
 }

屏幕上的输出是这样的，我认为这是错误的。为什么 .mdc 中的所有其他样式都应用于第二个按钮，我刚刚更改了它的颜色。

screen-output-now

【问题讨论】：

标签： reactjs

【解决方案1】：

我认为这里的行为是正确的。这两个按钮都有material-components-web css className，而您正在做的是向其中添加另一个类。您实际上并没有更改主类，而是使用另一个类扩展了第二个按钮的 css 样式。

它在下面的行为是，

 <button className="material-components-web">Default</button>
 <button className="material-components-web myDrawerHeader">Default2</button>

【讨论】：

我想你就在这里，那么我应该标记你的答案是正确的。谢谢

【解决方案2】：

我同意 Vishmi Money，这种行为是意料之中的。查看您使用的库的源代码时，它出现了对类名道具的注释， https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js

/** Additional className for the button */
className?: string

所以我认为这个想法是除了默认类之外，您可以定义自己的类，如果您想覆盖一些默认行为，那么您可以在自己的类中编写它。

【讨论】：