React中css的使用

网页的布局、颜色、形状等UI展现方式主要是由Css进行设置，在ReactJs中也是同样。ReactJs中的Css结构方式与传统的Web网页相似，但依然存在一些差别。ReactJs中Css文件自己的编写上并无差别，咱们能够定义特定的样式类名，也能够正对Html元素定义样式。差别主要在React对Css的使用上

• 引用的差别：

传统html文件中css文件引用方式：

<link rel="stylesheet" type="text/css" href="mystyle.css">

ReactJs中css文件引用方式：

你能够直接采用require:   require('./Category.css');

你也能够采用import:  import styles from './Category.css';

• 使用差别：

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

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

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

另外

若是你采用require的方式，你能够直接在页面元素中使用css文件中的样式名。

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

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

2.<div style={{marginTop:10}}>test </div>

3.import ReactDOM from 'react-dom';

<Button ref="button" />

const button = ReactDOM.findDOMNode(this.refs.button);

button.setAttribute('disabled', 'true'); 

• 最终解析文件的差别：

传统css文件通常依然保持着源码状态。

在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:

.customButton{

}

将转化为：

.index_customButton_23U0x{

}.

其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。