Question

我正在使用react，我发现这个很棒的库可以帮助你为名为classNames的组件定义css类。我也使用webpack css-loader将css导入到我的组件中，当尝试使用带导入css的classNames时，我收到语法错误。

以下是我的例子：

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

但这仅适用于单个课程，在这些简单的情况下，您可以执行以下操作：

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

React - 使用带导入的css的classNames

1 个答案: