javascript - 使用 React-Toolbox 的按钮进行样式设置不起作用

Question

我正在使用React-Toolbox's buttons ，纯粹是因为它们有很大的链式 react 。我希望能够为它们设计样式，或者为它们添加新图标，但它们非常难以改变。 第一，造型问题；我想让它们成为非蓝色、自定义尺寸、字体等。实际上我只想保留涟漪效果。文档本身说使用 className 来执行自定义样式，所以好吧，我就这么做了。

<Button type="button" className='randomButton' onClick={this.handleRandomButtonClick}>Random Card</Button>

.randomButton {
    background-color: #abcdef;
    color: #7B8585;
    opacity: 0.5;
    font-family: 'Dosis';
}

我也尝试过使用 Button.randomButton 作为 css 选择器。目前，该按钮仅显示为黑色和白色，并采用 Arial 字体。样式位于 styles.scss 文件中，我使用 webpack 来加载所有这些，不确定这是否会产生影响。

Answer 1

在react-toolbox-examples git repo中找到了答案:

import style from './style';
<Button type="button" className={style.button} onClick={this.handleRandomButtonClick}>Random Card</Button>

.button {
    background-color: #abcdef;
    color: #7B8585 ;
    opacity: 0.5;
    font-family: "Dosis";
}

技巧是定义从 .scss 样式表导入的按钮的 className。然后在样式表中，您可以使用新样式执行 .button，可能有些样式也必须标记为重要!。但我终于可以覆盖默认的东西了。