web-dev-qa-db-fra.com

Modules CSS, React et remplacement des classes CSS

J'utilise une bibliothèque de composants React (React Toolbox), qui génère cette classe dans leur composant Tab à l'aide de modules CSS et de Webpack: label___1nGy active___1Jur tab___Le7N Le tab est un accessoire className que je transmets. Les classes label et active proviennent de la bibliothèque. Je souhaite appliquer un ensemble de styles différent sur active, quelque chose comme .tab.active où tab fait référence aux styles que j'ai créés et active correspond au sélecteur généré que la bibliothèque a créé mais ne peut pas comprendre comment le faire avec les modules css. J'ai besoin de remplacer ce sélecteur dynamiquement: .label___1nGy.active___1Jur.

Browser

[CSS]] 2 [React]

csscss-modules
18
Joe Bruno

Ancien message mais toujours pertinent, donc ajouter une réponse pour aider ceux qui ont un problème similaire

Bien qu'il ne soit pas intrinsèquement possible dans les modules CSS seuls, l'auteur de la bibliothèque react-toolbox a en fait très bien résolu ce problème particulier

Lisez leurs documents github qui sont plus en profondeur sur le sujet à https://github.com/react-toolbox/react-toolbox#customizing-components

Une liste des classes thématiques pour un composant particulier est également disponible sur la page de démonstration des composants sur leur site.

Dans votre cas, en plus de passer un nom de classe pour l'onglet, vous devez également créer un thème avec des classes qui remplace les parties souhaitées du thème par défaut et le transmettre en tant que prop theme. Par exemple, quelque chose sur les lignes de ...

MyComponentWithTabs.css

.tab {
  color: white;
}

MyTabTheme.css

.active {
  color: hotpink;
}

MyComponentWithTabs.js

import styles from './MyComponentWithTabs.css'
import tabTheme from './MyTabTheme.css'

// blah blah...

return <Tab key={index} className={styles.tab} theme={tabTheme} />

Sous la surface, cela utilise un décorateur qu'ils ont résumé dans une bibliothèque distincte react-css-themr , je recommande également de faire une lecture car cela explique comment les valeurs par défaut sont composées avec vos remplacements de manière beaucoup plus approfondie, y compris les différentes stratégies de fusion qu'ils utilisent

6
alechill

Les modules CSS ne vous permettront pas de remplacer en toute sécurité le nom de classe actif (en grande partie par conception). Vraiment, il devrait être exposé via une API, par exemple 'activeClassName'.

Si les responsables ne sont pas d'accord ou si vous en avez besoin rapidement, vous pouvez facilement ajouter votre propre nom de classe actif car votre composant d'implémentation gère l'état de l'index:

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>
    );
  }
}

Avertissement: Le code n'a pas été testé.

5
riscarrott

J'ai eu un cas similaire, et je l'ai résolu comme suit:

import classNames from 'classnames';

...

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

return <div className={elementClassNames} />

J'utilise le package classnames pour ajouter dynamiquement la classe active basée sur le prop isActive. Au lieu d'un isActive prop, vous pouvez fournir n'importe quelle valeur booléenne.

Une façon plus concise de le faire peut être:

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