reactjs - React-Webpack。css-loader で className を更新する

Question

私が理解している限りclassName={styles.className}、多くのクラスで構成されていても、要素にクラスを1つだけ追加することは可能です。

したがって、現時点では、コードは値ternary operatorに応じて異なる要素スタイルをレンダリングするために使用していstate.crossます。

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.state = { cross: false };

    this.showCross = this.showCross.bind(this);
    this.showLine = this.showLine.bind(this);
  }

  showCross() {
    this.setState({cross: true});
  }

  showLine() {
    this.setState({cross: false});
  }

  render() {
    return (
      <div onMouseEnter={this.showCross} onMouseLeave={this.showLine} className={styles.blockClose}>
        <a className={this.state.close ? styles.closeCross : styles.closeLine}>&nbsp;</a>
      </div>
    )
  }
}

実際には、state変更されtransformて適用された後、2 つの線が十字のように表示されます。

:local(.closeLine) {
  ...20px line

  &::before {
    ...equal line
  }
}

:local(.closeCross) {
  composes: closeLine;
  transform: rotate(-45deg);

  &::before {
    transform: rotate(90deg);
  }
}

私の質問は、条件付きレンダリングの代わりに、要素のスタイリングを管理するのと

同じようにクラスをトグルすることは可能ですか?element.classList.toggle(className)

:local(.closeCross) {
  transform: rotate(-45deg);

  &::before {
    transform: rotate(90deg);
  }
}