CODEWITHSUNDEEP
reactjsmaterial-designmaterial-ui
vuvu
vuvu

Reputation: 5308

Colorize material-ui checkbox

How can I change the background color of an active checkbox when using material-ui.com-framework? The style-property has no effect on the svg-color of the checkbox.

         <Checkbox
          label="Simple"
         style={styles.checkbox}
       />

Upvotes: 0

Views: 6255

Answers (2)

Muhammad Amir
Muhammad Amir

Reputation: 672

If someone is still finding the solution, here is it how it's done.

  • Give primary or secondary color to <CheckBox/> component.
<CheckBox 
color = "primary"
/>
  • Change primary color of material ui using css:
.my-checkbox-wrapper .MuiCheckbox-colorPrimary{
color: 'green';
}

Upvotes: 0

Daniel Andrei
Daniel Andrei

Reputation: 2684

According to the docs you can style the components in this way using themes.

You can use predefined themes, or create a custom theme. For example, achieving what you want can be as simple as :

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Checkbox from 'material-ui/Checkbox';

const myTheme = getMuiTheme({
    checkbox: { checkedColor: 'red' }
});

and then, in the render function you can use the themeProvider and pass in your custom theme.This will extend the base theme with the keys you have changed.

render() {
    return (
        <MuiThemeProvider theme={myTheme}>
            <Checkbox />
        </MuiThemeProvider>
    );
}

Upvotes: 1

Related Questions