Customized Checkbox in Material-UI

by Boyanliuu

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

Babel + JSX

const { RaisedButton, MuiThemeProvider, getMuiTheme, Slider,Checkbox } = MaterialUI;

 class SliderExampleControlled extends React.Component {

  render() {
    console.log(this.state);
    return (
      <div style={{width: '50%', margin: '0 auto',backgroundColor:'#444444'}}>
        <Checkbox label='My checkbox' 
                  labelStyle={{color: 'white'}}
                  iconStyle={{fill: 'blue'}}
                  inputStyle={{color:'white'}}
                  style={{color:'white'}}/>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <SliderExampleControlled />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);