react样式的写法总结

一、标签行内样式写法:

<h2 style={{textAlign:"center",fontFamily:"黑体"}}>react</h1>
//行内标签样式要用双括号,如遇见两个单词就要第二个单词首字母大写驼峰命名

二、内部声明样式写法

const a={
  border:"1px solid black",
   width:"200",
  margin:"auto"
}

const b=<div style={a}>react</div>;

//js内部写样式就声明变量对象,像css一样写法 然后在stye属性上用单花括号进行绑定值对象

三、外部引用

//index.less
.main{
  border:"1px solid black"
}
//组件引入
import style from  from '.index.less' 
import './index.less'; //不配置cssModel 只需要less编译(我们常用的)

<h2 className={style.main}> react</h2>
<h2 className="main">不配置css解析器</h2>

//less语言有判断写法非常适合开发

绑定dom写法:

使用 ref="list"来进行绑定,获取时就用this.refs来获取进行操作

posted @ 2022-03-03 20:54  cc-front  阅读(511)  评论(0编辑  收藏  举报