React使用CSS布局的五种方式
五种方式:
1. 行内布局
行内布局是最基本的写法,在项目中比较少用
<div style = {
{
height:100, backgroundColor:'red'}}>
css样式采用驼峰命名法。如background-color的元素应该写出backgroundColor并且css的属性要放在双括号之间
因为在JSX中渲染的js表达式必须放在一对大括号内,{style}可以视为一个JS对象传入组件,{xxx},xxx内传递的是一个对象
2. 声明样式
声明样式是行内布局的另一种变化
// 先声明一个const变量
const style1={
background:'#eee',
width:'200px',
height:'200px'}
// 使用时直接传到style里
<div style = {
style1}>
3.引入模式
样式写在css中,使用时导入文件,这种方式比较常用
// .css文件
.person{
width: 60%;
margin