Can't style material-ui with its own props

Question

I'm using the material-ui and try to style the background-color of the RaisedButton, using one of its props called backgroundColor:

import React, {Component} from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.scss';

class Home extends Component {
    render() {
        return (
            <div>
                <h1 className={s.h1}>Pomodoro Tech</h1>
                <div className={s.imgContain}>
                    <img src={require('./pom.png')} width="100%" height="100%"/>
                </div>
                <div>
                    <RaisedButton
                        label="Login"
                        secondary={true}
                        backgroundColor="#77CA2D"
                    />
                    <RaisedButton
                        backgroundColor="#77CA2D"
                        label="About"
                    />
                </div>
            </div>
        );
    }
}

export default withStyles(Home, s);

But that property never makes any differences.

The version of the material-ui I am using is 0.15.0-alpha.1, according to the result of npm list --depth=0 command.

Before I ask this question I've done some search, but can't figure out what the problem is.

My best guess is that it's caused by your CSS because when I paste in what you show minus the styles, it honors my backgroundColor specification. Another possibility is that it's a bug in 15.x. I'm using 14.x. — Larry Maccherone, Mar 31 '16 at 03:30
@LarryMaccherone according to the answer in the link that I put in my question body, I replaced the ``RaisedButton`` with the ``FlatButton`` and the ``backgroundColor`` props worked fine.However when I tried the css solution in that answer, it failed and my ``RaisedButton`` remain unchanged. — Halt, Mar 31 '16 at 10:20

score 0 · Answer 1 · answered Apr 09 '16 at 07:14

0

It's working for me, have been using material-ui v0.14.4, may be it's been breaking in 0.15.0-alpha.1

Please paste the working example on JSBin or somewhere to debug it further.

answered Apr 09 '16 at 07:14

Mohammad Arif

6,987
4
40
42

score 0 · Answer 2 · edited Dec 08 '17 at 22:21

0

Make sure you don't include primary={true}; it will ignore your backgroundColor otherwise. See mine below:

<RaisedButton
  label={stepIndex === 2 ? 'Finish' : 'Next'}
  disableTouchRipple={true}
  disableFocusRipple={true}
  onClick={this.handleNext}
  backgroundColor={teal400}
/>

edited Dec 08 '17 at 22:21

Paul Roub

36,322
27
84
93

answered Dec 08 '17 at 22:15

fjaye

73
10

Can't style material-ui with its own props

2 Answers2