title: customizing switch using Material-UI with React
body: <p><a href="https://codesandbox.io/s/6yn3q2nnwn" rel="nofollow noreferrer">https://codesandbox.io/s/6yn3q2nnwn</a></p>
  
  <p>I am trying to use the iOS styled switch just like the one in the link above.</p>
  
  <p>In my component that uses a switch, I pretty much copied the codes used in that sandbox.</p>
  
  <p>Below are the codes in my component.</p>
  
  <pre><code>const styles = theme =&gt; ({
  
    iOSSwitchBase: {
      '&amp;$iOSChecked': {
        color: theme.palette.common.white,
        '&amp; + $iOSBar': {
          backgroundColor: '#52d869',
        },
      },
      transition: theme.transitions.create('transform', {
        duration: theme.transitions.duration.shortest,
        easing: theme.transitions.easing.sharp,
      }),
    },
    iOSChecked: {
      transform: 'translateX(15px)',
      '&amp; + $iOSBar': {
        opacity: 1,
        border: 'none',
      },
    },
    iOSBar: {
      borderRadius: 13,
      width: 42,
      height: 26,
      marginTop: -13,
      marginLeft: -21,
      border: 'solid 1px',
      borderColor: theme.palette.grey[400],
      backgroundColor: theme.palette.grey[50],
      opacity: 1,
      transition: theme.transitions.create(['background-color', 'border']),
    },
    iOSIcon: {
      width: 24,
      height: 24,
    },
    iOSIconChecked: {
      boxShadow: theme.shadows[1],
    },
  });
  </code></pre>
  
  <p>and in my render</p>
  
  <pre><code>  render() {
      const { classes } = this.props;
      const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
      //alert(this.props.rowItems.status)
      if (this.state.show) {
        return (
          &lt;tr
            className="experiment-list__row"
            onMouseDown={() =&gt; this.props.onRowHovered(this.props.rowItems.id)}
          &gt;
            &lt;td&gt;{this.props.rowItems.name}&lt;/td&gt;
            &lt;td&gt;{this.props.rowItems.owner}&lt;/td&gt;
            &lt;td&gt;{dateDisplay}&lt;/td&gt;
            &lt;td className="experiment-list--col__switch"&gt;
  
  
              &lt;Switch
                classes={{
                  switchBase: classes.iOSSwitchBase,
                  bar: classes.iOSBar,
                  icon: classes.iOSIcon,
                  iconChecked: classes.iOSIconChecked,
                  checked: classes.iOSChecked,
                }}
                disableRipple
                onClick={e =&gt; e.preventDefault()}
                checked={this.props.rowItems.status}
                onChange={this.change}
              /&gt;
  
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      } else {
        return null;
      }
    }
  </code></pre>
  
  <p>This gives me an error saying that <code>classes</code> is <code>undefined</code>.</p>
  
  <p>Why is it not working?</p>
  
  <p><strong>edit</strong></p>
  
  <p>This is the thing that I actually export to another component</p>
  
  <pre><code>const List = props =&gt; {
    return (
      &lt;table className="experiment-list"&gt;
        &lt;tbody&gt;
          &lt;ListHeader /&gt;
          {props.rowItems.map((data, i) =&gt; (
            &lt;ListRow
              key={i}
              rowItems={data}
              onRowHovered={props.onRowHovered}
              toggleSwitch={props.toggleSwitch}
              shouldShowItem={props.shouldShowItem}
              viewActive={props.viewActive}
            /&gt;
          ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  </code></pre>