Question

我正在尝试使用iOS样式的开关，就像上面链接中那样。

在我使用交换机的组件中，我几乎复制了该沙箱中使用的代码。

以下是我的组件中的代码。

const styles = theme => ({

  iOSSwitchBase: {
    '&$iOSChecked': {
      color: theme.palette.common.white,
      '& + $iOSBar': {
        backgroundColor: '#52d869',
      },
    },
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
      easing: theme.transitions.easing.sharp,
    }),
  },
  iOSChecked: {
    transform: 'translateX(15px)',
    '& + $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],
  },
});

和我的渲染

  render() {
    const { classes } = this.props;
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    //alert(this.props.rowItems.status)
    if (this.state.show) {
      return (
        <tr
          className="experiment-list__row"
          onMouseDown={() => this.props.onRowHovered(this.props.rowItems.id)}
        >
          <td>{this.props.rowItems.name}</td>
          <td>{this.props.rowItems.owner}</td>
          <td>{dateDisplay}</td>
          <td className="experiment-list--col__switch">


            <Switch
              classes={{
                switchBase: classes.iOSSwitchBase,
                bar: classes.iOSBar,
                icon: classes.iOSIcon,
                iconChecked: classes.iOSIconChecked,
                checked: classes.iOSChecked,
              }}
              disableRipple
              onClick={e => e.preventDefault()}
              checked={this.props.rowItems.status}
              onChange={this.change}
            />

          </td>
        </tr>
      );
    } else {
      return null;
    }
  }

这给我一个错误，指出classes是undefined。

为什么不起作用？

修改

这是我实际导出到另一个组件的东西

const List = props => {
  return (
    <table className="experiment-list">
      <tbody>
        <ListHeader />
        {props.rowItems.map((data, i) => (
          <ListRow
            key={i}
            rowItems={data}
            onRowHovered={props.onRowHovered}
            toggleSwitch={props.toggleSwitch}
            shouldShowItem={props.shouldShowItem}
            viewActive={props.viewActive}
          />
        ))}
      </tbody>
    </table>
  );
};

使用带有React的Material-UI自定义开关

0 个答案: