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

【问题标题】：Styling with React-Toolbox's Button not working使用 React-Toolbox 的按钮进行样式设置不起作用
【发布时间】：2016-05-03 23:42:59
【问题描述】：

我使用React-Toolbox's buttons，纯粹是因为它们有很大的连锁反应。我希望能够为它们设置样式，或者为它们添加一个新图标，但它们对更改具有难以置信的抵抗力。一是造型问题；我想让它们变成非蓝色、自定义大小、字体等。真的我只想保持涟漪效应。文档自己说要使用className 来做自定义样式，所以好吧，我这样做了。

&lt;Button type="button" className='randomButton' onClick={this.handleRandomButtonClick}&gt;Random Card&lt;/Button&gt;

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

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

【问题讨论】：

标签： javascript css svg reactjs webpack

【解决方案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";
}

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

【讨论】：