Реагировать - используя classNames с импортированным CSS

Question

Реагировать - используя classNames с импортированным CSS

0

Я использую реакцию, и я нашел эту удивительную библиотеку, которая поможет вам определить классы css для компонентов, называемых classNames. Я также использую webpack css-loader, чтобы импортировать css в мой компонент, и при попытке использовать имена классов с import css я получаю синтаксическую ошибку.

Вот мой пример:

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
    render() {
        let style = classNames({
            styles.someClass: true
        });
    }
}

Как я могу использовать оба?

Pachu 15 июнь 2016, в 08:09

Источник

Теги:

reactjs

css

css-loader

1 ответ

Ещё вопросы

ctrlplusb · Accepted Answer · 2016-06-15T06-41-00.000Z

Вы можете использовать синтаксис вычисляемых свойств ES6/2015, например:

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
  render() {
    const style = classNames({
      // This is a computed property, i.e. surrounded by []
      [styles.someClass]: true
    });
  }
}

Но это только для одного класса, в этих простых случаях вы можете просто сделать что-то вроде:

const style = this.state.active ? styles.someClass : '';

Библиотека classNames особенно полезна при объединении нескольких классов, например:

import React from 'react';
import styles from './style.css';
import classNames from 'classnames';

export default class Menu extends React.Component {
  render() {
    const style = classNames(
      // add as many classes or objects as we would like here
      styles.foo,
      styles.bar,
      { [styles.someClass]: this.props.active }
    );
  }
}

У меня есть простые CSS-предложения рядом с моим компонентом (без использования импорта), так как я могу использовать эти классы. создать переменную, используя литералы шаблона? Мне не нужно делать классы, подобные JS (например, от btn-hover до btnHover), надеюсь, это имеет смысл ...