React-组件样式的两种方式

导语：与传统使用CSS给HTML添加样式的方式相比，React在给元素添加样式的时候方式有所不同。React的核心哲学之一就是让可视化的组件自包含，并且可复用。这就是为什么HTML元素和Javascript放在一起组成了（组件）。本节内容我们将介绍React定义样式的方式。

第一种方式：选择器样式

首先创建Person.css，定义我们所需要的样式，具体样式代码定义为如下形式：

.Person{width:60%;margin:16pxauto;border:1pxsolid#eee;box-shadow:2px3px#ccc;padding:16px;text-align:center;}

input{width:200px;border:1pxsolid#eee;outline:none;border-radius:10px;padding:16px;}

如果要使用样式，需要在Person.js中引入：

import'./Person.css'

这时可以查看页面变化：

可以看到我们定义的input标签选择器样式已经生效，如果要使用类选择器，需要使用className属性：

这时样式就渲染上了，效果图如下：

第二种方式：内联样式

React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用。下面给按钮添加一个内联样式：

来到App.js文件，将button按钮定义为如下形式：

style={{backgroundColor:'white',border:'1px solid blue',padding:'8px',cursor:'pointer'}}>

更改状态值

需要注意的是，JSX中使用样式对象定义内联样式，复合样式使用驼峰命名法，对象属性直接使用逗号隔开。

为了书写方法，我们通常将样式对象定义在render中，可以将上面代码改为如下形式：

render() {

// 定义行内样式

conststyle= {

backgroundColor:'white',

border:'1px solid blue',

outline:'none',

padding:'8px',

cursor:'pointer'

}

return(

更改状态值

)

}

效果图如下：

如果你透过上面的例子收入思考的话，随着React学习的深入，你会发现之所以React使用了和以往不同的添加样式方法是有原因的。

结语：下节内容我们将介绍React中的if分支。感谢大家的关注！