css - React - 使用带有导入 css 的类名

Question

我正在使用 react，我发现这个很棒的库可以帮助您为名为 classNames 的组件定义 css 类。我还在使用 webpack css-loader 来将 css 导入到我的组件中，并且在尝试将 classNames 与 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
        });
    }
}

我怎样才能同时使用两者？

Answer 1

您可以使用 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 }
    );
  }
}