CODEWITHSUNDEEP
reactjsmaterial-ui
Roberto
Roberto

Reputation: 1395

How to change color of Button (material-ui) on navigation on it?

There is react + material-ui application and used Button component.

<Button classes={{root: classes.button, label: classes.label}} variant="raised" color="primary">

Which attribute do I need change for changing background color of button on click? By default it is yellow.

I got Button component from here https://material-ui-next.com/demos/buttons/

Upvotes: 0

Views: 12482

Answers (1)

Aniko Litvanyi
Aniko Litvanyi

Reputation: 2149

  1. Define a secondary color in the material-ui theme like:

const muiTheme = createMuiTheme({ palette: { primary: lightBlue, secondary: pink, }, })

  1. Define a state variable holding the value of the color property, set it to 'primary' by default.

  2. Add a method to your component to handle changing the value of the color variable:

    handleClick(e){ this.setState({ color: 'secondary' }) }

  3. Add onClick attribute to the button like

onClick={(event) => this.onClick(event)}

Upvotes: 2

Related Questions