joywok-material-components/components/checkbox/index.js

<h1 align="center"> Joywok Material Components </h1>

/**
 * 
 * @api {}   Checkbox 多选框
 * @apiName   Checkbox 多选框，选中默认绿色，可以设置成蓝色
 * @apiGroup 组件使用
 * @apiParam {String} checked 选中状态  true 选中， false 不选中
 * @apiParam {Bool} checked 选中状态  true 选中， false 不选中
 * @apiParam {String} colorSystem 色系，blue 蓝色； 默认为绿色
 * @apiParam {function } onChange 回调事件，回传event  function(event: object)
 * 
 * @apiSuccessExample {json} 使用案例:
import { Checkbox } from 'joywok-material-components';

changeForceFollow(e){
  console.log('changeForceFollow:',e.target.checked)
  this.setState({
    force_follow: e.target.checked
  })
}

<div className="jw-m-common-checkbox-item">
  <Checkbox
    className="jw-m-common-checkbox"
    colorSystem="blue"
    value={'force_follow'}
    checked={this.state.force_follow==1 ? true : false}
    onChange={(e)=>self.changeForceFollow(e)}
  />
  <font>强制关注</font>
</div>
 *
 * 
 */

import React from 'react';
import ReactDOM from 'react-dom';
import Checkbox from '@material-ui/core/Checkbox';
import { withStyles } from '@material-ui/core/styles';
import Radio from "@material-ui/core/Radio/Radio";
const styles = theme => ({
  root: {
    color: '#CCCCCC',
    '&$checked': {
      color: '#23AF8C',
    },
  },
  rootBlue: {
    color: '#CCCCCC',
    '&$checked': {
      color: '#008df7',
    }
  },
  checked: {},
});
class JwCheckbox extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      colorSystem: props.colorSystem || 'green'
    };
  }
  render(){
    const { classes } = this.props;
    let classesRoot = this.state.colorSystem=='blue' ? classes.rootBlue : classes.root;
  	return (<div className="jw-checkbox ">
        <Checkbox {...this.props} classes={{
          root: classesRoot,
          checked: classes.checked,
        }}/>
      </div>
      )
  }
}

export default withStyles(styles)(JwCheckbox);