Material UI color picker using react-color

ColorPicker.js

import React, { Component } from 'react' // v16.1.1
import { withStyles } from 'material-ui/styles' // v1.0.0-beta.21
import { SketchPicker } from 'react-color' // v2.13.8
import Input, { InputLabel, InputAdornment } from 'material-ui/Input'
import { FormControl } from 'material-ui/Form'
import IconButton from 'material-ui/IconButton'


const styles = theme => ({
  root: {
    position: 'relative',
    marginTop: theme.spacing.unit * 3
  },
  color: {
    width: 20,
    height: 20,
    borderRadius: 2,
  },
  popover: {
    position: 'absolute',
    right: 0,
    zIndex: 2
  },
  cover: {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }
})

class ColorPicker extends Component {
  state = {
    displayColorPicker: false,
    color: this.props.baseColor || '000000',
  }

  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  }

  handleClose = () => {
    this.setState({ displayColorPicker: false })
  }

  handleChange = color => {
    this.setState({ color: color.hex.substr(1) })
  }

  handleInputChange = event => {
    this.setState({ color: event.target.value })
  }

  render () {
    const { classes } = this.props
    const color = { background: '#' + this.state.color }
    const colorPicker = (
      <div className={classes.popover}>
        <div className={classes.cover} onClick={this.handleClose}/>
        <SketchPicker color={('#' + this.state.color)} onChange={this.handleChange}/>
      </div>
    )

    return (
      <div className={classes.root}>
        <FormControl fullWidth>
          <InputLabel htmlFor={this.props.colorLabel}>{this.props.colorLabel}</InputLabel>
          <Input
            id={this.props.colorLabel}
            value={this.state.color}
            onChange={this.handleInputChange}
            startAdornment={<InputAdornment position="start">#</InputAdornment>}
            endAdornment={
              <InputAdornment position="end">
                <IconButton onClick={this.handleClick}>
                  <div className={classes.color} style={color}/>
                </IconButton>
              </InputAdornment>
            }
          />
        </FormControl>
        {this.state.displayColorPicker ? colorPicker : null}
      </div>
    )
  }
}

export default withStyles(styles)(ColorPicker)