Question

我是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 className，您可以添加自己的类，这意味着您正在更改主类。

任何帮助将不胜感激。

代码：

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

Answer 1

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

有下面表现为，

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

Answer 2

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

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

所以我认为这个想法是在默认类旁边的，您可以定义自己的类，如果要覆盖某些默认行为，则可以在自己的类中编写它。

为什么CSS无法正确应用到React Material Web组件中的按钮？

2 个答案: