CSS-Module, Reagieren und Überschreiben von CSS-Klassen

Question

Ich verwende eine React-Komponentenbibliothek (React Toolbox), die diese Klasse in ihrer Tab-Komponente unter Verwendung von CSS-Modulen und Webpack ausgibt: Die tab ist eine Klassenname-Stütze, die ich übergebe. Die Klassen label und active stammen aus der Bibliothek. Ich möchte einen anderen Satz von Stilen auf active, etwas wie .tab.active, wo tab bezieht sich auf die Stile, die ich erstellt habe und active entspricht der generierten Selektor die Bibliothek erstellt hat, aber kann nicht herausfinden, wie dies mit CSS-Modulen zu tun. Ich muss diesen dynamischen Selektor überschreiben: .label___1nGy.active___1Jur.

[]] 2 [] 3

Answer 1

Alte Post, aber immer noch relevant, so eine Antwort Zugabe allein solche mit ähnlichem Problem

Zwar nicht von Natur aus möglich in CSS Module zu helfen, der Autor der Reaktion-Toolbox Bibliothek hat dieses spezielle Problem sehr schön

lesen ihre github docs tatsächlich gelöst, die bei https://github.com/react-toolbox/react-toolbox#customizing-components

zum Thema mehr in die Tiefe sind

Eine Liste der Theme-fähig Klassen für eine bestimmte Komponente auf der Komponente Demo-Seite auf ihrer Website zu

einen Klassennamen für Reiter als Übergang auch in Ihrem Fall gegeben ist, würden Sie auch ein Thema mit Klassen erstellen, die überschreiben die gewünschten Teile des Standardthemas und übergeben diese als theme prop. Zum Beispiel etwas alog den Linien ...

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

Unter der Oberfläche dieses einen Dekorateur verwendet sie in separate Bibliothek abstrahiert haben react-css-themr, ich geben wird empfohlen, eine zu lesen, da es wird erläutert, wie die Standardwerte mit Überschreibungswerten in viel größerer Tiefe zusammengesetzt sind, einschließlich der verschiedenen Verschmelzen Strategien, die sie verwenden

Answer 2

CSS-Module werden Sie sicher nicht zulassen, dass der aktiven Klassennamen überschreiben (weitgehend durch Design). Wirklich sollte es über eine API, z. 'activeClassName'.

Wenn die Maintainer nicht einverstanden ist, oder Sie müssen diese schnell, dann können Sie ganz einfach Ihre eigenen aktiven classname hinzufügen, da Ihre Implementierung Komponente den Index Zustandsverwaltungs:

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

Haftungsausschluss: Code ist nicht getestet.

Answer 3

hatte ich einen ähnlichen Fall, und ich löste es etwa so:

import classNames from 'classnames'; 

... 

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

return <div className={elementClassNames} /> 

ich das classnames Paket mit bin, um dynamisch die aktive Klasse hinzufügen, der isActive prop basiert. Anstelle eines isActive Props können Sie einen beliebigen booleschen Wert angeben. sein kann

Eine lapidare Weise, dies zu tun:

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