导语:与传统使用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分支。感谢大家的关注!
领取专属 10元无门槛券
私享最新 技术干货