Styling with React-Toolbox's Button not workin

Question

I'm using React-Toolbox's buttons, purely because they have the great ripple effect. I'd like to be able to style them, or add a new icon for them, but they're incredibly resistant to change. First, the styling issue; I want to make them non-blue, a custom size, font, etc. Really I just want to keep the ripple effect. The docs themselves say to use className to do custom styles, so ok, I do that.

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

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

I've tried Button.randomButton for the css selector too. Currently the button just appears black and white, and in Arial font. The styles are in the styles.scss file and I'm using webpack to load all of this, not sure if that makes a difference.

Answer 1

Found the answer in the 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";
}

Trick is to define the className of the button as imported from the .scss stylesheet. Then in the stylesheet you can just do .button with new styles, probably some have to be marked important! as well. But I can finally override the default stuff.