Модули CSS, Реагирование и переопределение CSS-классов

Я использую библиотеку компонентов React (React Toolbox), которая выводит этот класс в свой компонент Tab с помощью CSS-модулей и Webpack: label___1nGy active___1Jur tab___Le7N tab - это имя класса, которое я передаю. Классы label и active поступают из библиотеки. Я хочу применить другой набор стилей на active, что-то вроде .tab.active, где tab относится к стилям, которые я создал, и active соответствует сгенерированному селектору, который создала библиотека, но не может понять, как это сделать это с css-модулями. Мне нужно переопределить этот динамический селектор: .label___1nGy.active___1Jur.

[]] 2 [] 3

Ответ 1

Старый пост, но все еще актуален, поэтому добавьте ответ, чтобы помочь тем, у кого похожая проблема

Хотя это невозможно по своей сути только в модулях CSS, автор библиотекиact-toolbox на самом деле очень хорошо решил эту конкретную проблему

Прочитайте их документы github, которые более подробно обсуждают эту тему, по адресу https://github.com/react-toolbox/react-toolbox#customizing-components.

Список тематических классов для конкретного компонента также приведен на демонстрационной странице компонента на их сайте.

В вашем случае, наряду с передачей className для tab, вы также создадите тему с классами, которая переопределяет требуемые части темы по умолчанию и передает ее в качестве theme поддержки. Например, что-то вроде строк...

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

Под поверхностью он использует декоратор, который они абстрагировали в отдельную библиотеку response-css-themr, я рекомендую также прочитать его, так как он объясняет, как значения по умолчанию составляются с вашими переопределениями гораздо глубже, включая различные стратегии объединения, которые они используют

Ответ 2

Модули CSS не позволят вам безопасно переопределить активное имя класса (в основном по дизайну). На самом деле это должно быть представлено через API, например, 'activeClassName'.

Если сопровождающие не согласны или вам нужно это быстро, вы можете легко добавить свое собственное активное имя класса, потому что ваш реализующий компонент управляет состоянием индекса:

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

Отказ от ответственности: код не проверен.

Ответ 3

У меня был подобный случай, и я решил это так:

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 prop вы можете предоставить любое логическое значение.

Более короткий способ сделать это может быть:

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