Material-ui: Colors are not working on Raised Button

[ammark47]

I am trying to get the colors shown in the material-ui.com RaisedButton demo but my button only comes out as grey. Not sure why this is not working.

this is my customThemeManager:

export default {
  spacing: Spacing,
  zIndex: zIndex,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.pinkA200,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.pinkA200, 0.3),
    pickerHeaderColor: Colors.cyan500,
  }
};

[ammark47]

I've tried inline styles, changing the css file, and this:

constructor(props, context) {
          super(props, context);
          this.state = {
            muiTheme: ThemeManager.getMuiTheme(DarkRawTheme)
          }
        }

        static childContextTypes = {
            muiTheme: React.PropTypes.object,
         }

        getChildContext() {
           return {
             muiTheme: this.state.muiTheme,
           };
         }

         componentWillMount() {
             let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
                                primary1Color: "#1690DB",
                                primary2Color: "#2173B3",
                                primary3Color: "#A9D2EB",
                                accent1Color: "#ED3B3B",
                                accent2Color: "#ED2B2B",
                                accent3Color: "#F58C8C",


                                // rest of the palette is set from Theme Manager
                                });

             this.setState({muiTheme: newMuiTheme});
           }

Nothing changes the background color of the button.

[dcsan]

I noticed this too and assumed I was just doing something wrong, but apparently not.

I am able to change the secondary color by modifying the theme tho.

var Spacing = MUI.Styles.Spacing;
var Colors = MUI.Styles.Colors;
var ColorManipulator = MUI.Utils.ColorManipulator;

AppTheme = {
  appBar: {
    color: '#1168c2',
    textColor: 'white'
  },

  zIndex: {
    leftNav: 1000
  },
  spacing: Spacing,
  fontFamily: 'sans-serif',
  palette: {
    primary1Color: '#45058e',
    primary2Color: '#E22A23',
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.blue500,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
  }
};

and then later:

/* global AppLeftNav:true,NavButton:true */

const { AppBar, IconButton, IconMenu, LeftNav } = MUI;
const { MenuItem } = MUI;
const { NavigationMoreVert } = MUI.Libs.SvgIcons;

var { Styles, Colors } = MUI;
var { ThemeManager } = Styles;

MainLayout = React.createClass({

  propTypes: {
    content: React.PropTypes.object
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext() {
    return {
      muiTheme: ThemeManager.getMuiTheme(AppTheme)
    };
  },

  showLeftMenu() {
    Logger.log('show left', this.refs.leftNav);
    this.refs.leftNav.handleToggle();
  },

  render() {
    return (
      <div className='app'>

        <AppLeftNav
          ref='leftNav'
        />

        <AppBar
          title={AppConfig.pageName}
          onTouchTap={this.showLeftMenu}
        />
        <div>
          {this.props.content}
        </div>
      </div>
    );
  },


});

HTH.
note this is an example using meteor.

[ammark47]

The colors aren't working on opera and chrome but they are working on Firefox.

[ankitduseja]

+1 Not working in any browser for me!

[ankitduseja]

I realised my mistake, I was passing the state on a child component. It should ideally be done on the top level component.

[gfogle]

i just ran into this as well. backgroundColor and labelColor as attributes work, but the backgroundColor and color properties on the inline styles object appear to do nothing when specified.

i'll look into finding the issue in the code tomorrow.

[drudv]

I had probably the same issue. I was trying to provide a label text by this way:

<RaisedButton>Label text</RaisedButton>

and was unable to change label colors. Solved by:

<RaisedButton label="Label Text" />

[tintin1343]

Why don't you guys use backgroundColor and labelColor instead that should solve your problems.?

[tintin1343]

I am closing this for now as the problem mentioned above can be clearly solved using backgroundColor and labelColor props of RaisedButton. If there is any further issues please open a new issue.

[OCNVN]

Hi, in version 0.15.0 I'm trying to change the background color of the RaisedButton using the backgoundColor prop but it doesn't work anymore, I'm using the baseTheme in the component maybe it has something to do with my problem, I'm new wi the 0.15.0 V, there is some rule I'm missing?

[Grungla]

I had primary={true} on, removing that fixed the problem for me using: backgroundColo and labelColor.

[robverhoef]

This really appears to be a bug to me. As a newbie on material-ui I would expect to put an icon on a button like this:
<RaisedButton primary={true}> <i className="material-icons">chevron_left</i> </RaisedButton>
It doesn't work on Chrome 50, React 15.1.0, material-ui 0.15.0. The font color is not set. I found an ugly workaround using JSX:
<RaisedButton primary={true} label={(<i className="material-icons">chevron_left</i>)} />

[mbrookes]

@robverhoef Composability is on the roadmap but in the meantime you may find the examples in the documentation helpful: http://www.material-ui.com/#/components/raised-button.

[Moejoe90]

I'm not sure if your having the problem still but for me it worked when i removed the primary={true}, attribute.

[stevematdavies]

Not yet solved,

[indefinitelee]

still having issues with this.

<RaisedButton label="Be Greeeendd!!!" primary={true} style={{backgroundColor: "#2AA96E !important", paddingLeft: "20px"}} onClick={this.props.hideModal} />

results in the green color appearing between this button and the adjacent button. I've also tried primary={false} labelColor and not having the primary property at all.

Edit, ugh it works as
RaisedButton backgroundColor="myColor" />
but not inside the styles object

[mobimation]

So the demo and source example is a bit misleading: http://www.material-ui.com/#/components/raised-button
It tells a property "primary=true" is supposed to turn the button green
or more specifically: "If true, the button will use the theme's primary color."
And in the example where that theme color is set is not obvious.