web-dev-qa-db-ja.com

CSSモジュール、ReactおよびCSSクラスのオーバーライド

Reactコンポーネントライブラリ（React Toolbox）を使用しています。これは、CSSモジュールとWebpackを使用して、タブコンポーネントでこのクラスを出力しています：label___1nGy active___1Jur tab___Le7Ntabは、私が伝えているclassNameプロパティです。 labelおよびactiveクラスはライブラリから取得されます。 activeに別のスタイルセットを適用したい、.tab.activeここで、tabは作成したスタイルを指し、activeはライブラリが作成した生成されたセレクターと一致しますが、css-modulesでこれを行う方法がわかりません。この動的セレクターをオーバーライドする必要があります：.label___1nGy.active___1Jur。

Browser

[CSS]] 2 [React]

csscss-modules
18
Joe Bruno

CSSモジュールでは、アクティブなclassNameを安全にオーバーライドすることはできません（主に設計上）。実際には、APIを介して公開する必要があります。 「activeClassName」。

メンテナが同意しない場合、またはこれを迅速に行う必要がある場合、実装コンポーネントがインデックスの状態を管理しているため、独自のアクティブなclassNameを簡単に追加できます。

import {Tab, Tabs} from 'react-toolbox';
import styles from './MyTabs.css';


class MyTabs extends React.Component {
  state = {
    index: 1
  };

  handleTabChange(index) {
    this.setState({ index });
  }

  render() {
    const { index } = this.state;
    return (
      <Tabs index={index} onChange={this.handleTabChange}>
        <Tab label="Tab0" className={index === 0 ? styles.active : null}>
            Tab 0 content
        </Tab>
        <Tab label="Tab1" className={index === 1 ? styles.active : null}>
            Tab 1 content
        </Tab>
      </Tabs>
    );
  }
}

免責事項：コードはテストされていません。

5
riscarrott

私は同様のケースを持っていて、それを次のように解決しました：

import classNames from 'classnames';

...

const activeClassName = {};
activeClassName[`${styles.active}`] = this.props.isActive;
const elementClassNames = classNames(styles.element, activeClassName);

return <div className={elementClassNames} />

classnamesパッケージを使用して、isActive propに基づいてアクティブクラスを動的に追加しています。 isActiveプロップの代わりに、任意のブール値を提供できます。

これを行うより簡潔な方法は次のとおりです。

const elementClassNames = classNames(styles.element, {[styles.active]: this.props.isActive});
3
Patrick