我该如何在reactJS中使用css？

Question

我是新手,对ES6做出反应,并且已经阅读了很多关于CSS的内容,他们试图解决的问题是全局性的style.css而是使用

款式/ index.js

var styles = {
  transparentBg: {
    background: 'transparent'
  }
};

许多人争辩说,如果你没有数百个CSS类,你应该回去编写CSS(我不知道CSS的名称是什么,上面的代码),而不是单独的文件.这感觉很奇怪.这是真的吗？

许多CSS框架,如流行的Bootstrap仍然在"旧"CSS中.有关系吗？知道应用程序仍然有效,但必须有一些理由选择这样做才能做到这一点.我能为此做些什么吗？

将CSS和CSS框架与ReactJS一起使用时,最佳做法是什么？

Answer 1

这是主观的,但在我看来,通过CSS模块和PostCSS使用传统的CSS更实用.

例如,您可能有一个这样的CSS文件:

.btn {
  border: 1px solid black;
  border-radius: 2px;
}

.icon {
  background: url(...);
}

通过css-loader?modules=true如下方式使用React组件:

import React from 'react';
import s from './Button.css';

function Button() {
  return (
    <button className={s.btn}><i className={s.icon} />Click Me</button>
  );
}

export default Button;

借助CSS模块的神奇之处,该组件将在调试(开发)模式下呈现为以下HTML标记:

<button class="Button_btn_d41d8"><i class="Button_icon_7b91e"></i>Click Me</button>

每个CSS类<ComponentName>-<ClassName>-<Hash>名由其组成,有效地避免了具有多个组件的相同名称的CSS类名之间的冲突.在发布(生产)环境中,相同的组件将呈现为:

<button class="d41d"><i class="7b91"></i>Click Me</button>

其中每个类名只是一个4-5个字符长的哈希字符串.

这是它在React Starter Kit中的工作原理(免责声明:我是作者)