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的computed properties syntax，例如：

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

但这仅适用于单个 class，在这些简单的情况下，您可以这样做：

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

classNames 库在组合多个 classes 时特别有用，如下所示：

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

React - 将类名与导入的 css 一起使用

React - using classNames with imported css

css

class-names

reactjs

css-loader