CSS Module, React e Overriding CSS Classes

Question

Sto usando una libreria di componenti React (React Toolbox), che sta emettendo questa classe nel loro componente Tab usando i moduli CSS e Webpack: label___1nGy active___1Jur tab___Le7N Il tab è un prop di className che sto passando. Le classi label e active provengono dalla libreria. Voglio applicare un diverso set di stili su active, qualcosa come .tab.active dove tab si riferisce agli stili che ho creato e active corrisponde al selettore generato creato dalla libreria ma non riesce a capire come farlo con i moduli css. Devo ignorare questo selettore dinamico: .label___1nGy.active___1Jur.

[]] 2 [] 3

Answer 1

Vecchio post, ma ancora attuale, in modo da aggiungere una risposta per aiutare le persone con problema analogo

Anche se non è di per sé possibile in moduli CSS solo, l'autore della biblioteca reagire-toolbox ha effettivamente risolto questo problema particolare molto ben

Read loro documenti github che sono più in profondità sul soggetto al https://github.com/react-toolbox/react-toolbox#customizing-components

L'elenco delle classi e personalizzabile per un particolare componente è dato sulla pagina demo componente sul loro sito troppo

Nel tuo caso, così come il superamento di un className per scheda, si dovrebbe anche creare un tema con le classi che sostituisce quella parte desiderata del tema predefinito e passarla come puntello theme. Per esempio qualcosa alog le linee di ...

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} /> 

Sotto la superficie questo utilizza un decoratore che hanno astratti in libreria separata react-css-themr, vi consiglio di dare che una lettura troppo in quanto spiega come le impostazioni predefinite sono composte con le sostituzioni in modo molto più approfondito, tra cui il diverso fusione strategie che usano

Answer 2

moduli CSS non consentono di ignorare in modo sicuro il className attiva (in gran parte in base alla progettazione). In realtà dovrebbe essere esposto tramite un'API, ad es. 'ActiveClassName'.

Se i manutentori non sono d'accordo o avete bisogno di questo rapido allora si può facilmente aggiungere la tua className attiva, in quanto il componente attuazione è la gestione dello stato di indice:

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" clasName={index === 1 ? styles.active : null}> 
      Tab 1 content 
     </Tab> 
     </Tabs> 
    ); 
    } 
} 

responsabilità: Codice è non testati.

Answer 3

ho avuto un caso simile, e ho risolto in questo modo:

import classNames from 'classnames'; 

... 

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

return <div className={elementClassNames} /> 

sto usando il pacchetto classnames di aggiungere dinamicamente la classe attiva in base al largo della prop isActive. Invece di un oggetto di supporto isActive puoi fornire qualsiasi valore booleano.

Un modo più conciso di fare questo può essere:

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