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

Posted 2023-03-16

【中文标题】React - 使用带有导入 css 的类名

【英文标题】：React - using classNames with imported css

【发布时间】：2016-10-16 01:53:16

【问题描述】：

我正在使用 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
        );
    

如何同时使用？

【参考方案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 
    );
  

【讨论】：

我的组件旁边有普通的 css 类（不使用导入），所以我该如何使用这些类。使用模板文字创建变量？我不必让类 JS 像（即 btn-hover 到 btnHover）希望这是有道理的......

classnames 包也适用于普通的旧字符串。 ?github.com/JedWatson/classnames