react中引用css,require和import 中的区别

ReactJs中css文件引用方式：

你可以直接采用require:   require('./list.css');

你也可以采用import:  import styles from './list.css';

传统css的使用方式是设置class: <div class=”center”> test </div>

ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。

 <div className='entry'>test </div>

如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。

如果你采用import styles from './Category.css';的方式，则应采用以下方式。

 <div className={style.entry}>test </div>

最终解析文件的差异：

传统css文件一般依然保持着源码状态。

在ReactJS中，Css文件最终将会对css样式名进行转换

ps：如果样式中传递属性只需一个{{}}

eg <div className="role_img" style={{background:role.bg}}>

role.bg不用再加{}