css - React - 使用 classNames 和导入的 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

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