如何用react优雅的书写CSS
1.内联样式
优点:这种方式较为简单,一目了然,给标签添加style属性。
缺点: 这种方式可以造成项目结构较为臃肿,造成css命名冲突。
import React, { Component } from 'react' import PropTypes from 'prop-types' export default class index extends Component { static propTypes = { title: PropTypes.string } render() { const h1Style={textAlign:'center',marginBottom:'20px',lineHeight:'35px', height:'30px'} const {title}=this.props return ( <div> <h1 style={h1Style}>{title}</h1> <hr/> </div> ) } }
2.使用import导入方式
优点:这种方式使用起来更加灵巧,类似于css中的外部引入
缺点:因为react样式默认是全局样式,很有可能造成样式冲突
使用:新建css文件,在jsx语法中通过className属性设置类名,在css使用类名,这种方式可以使用三元表达式,通过定义变量来选择类名。
import React, { Component } from 'react' import "./index.css" export default class index extends Component { state={ flag:true } changeColor=()=>{ this.setState((state,props)=>{ return{ flag:!state.flag } }) } render() { const {flag}=this.state return ( <div> <h1 className={flag?'blueColor':'redColor'}>莫等闲,白了少年头</h1> <button onClick={this.changeColor} className="btnStyle">点击更改字体颜色</button> </div> ) } }
.blueColor{ color: blue; } .redColor{ color: red; } .btnStyle{ width: 260px; height: 50px; background-color: aqua; color: #fff; border:none; font-size: 28px; border-radius: 10px; }
3.css module模块导出
优点:不会造成命名冲突,样式局部有效
缺点:太过麻烦,每次都需要模块导入导出,相当于将css所有类名作为一个对象的属性,在需要使用该对象属性时,通过调用对象属性的方式调用类名,解决css冲突的方式是给不同的类名添加前缀,类似于vue中给style设置module
使用:
- 在cra脚手架中只要在父组件中引入了css样式,那么这个样式就是全局样式
- 在react中用模块化来解决样式冲突的问题
- 在cra脚手架中,如果某个样式文件要开启模块化,只需要把样式文件命名为xx.module.css/xx.module.scss就可以了
import React,{FC,useState} from "react" import Cmittem from "@/components1/cmittem" import cssObj from "./cmtlist.module.scss" const Cmtlist:FC<{}>=(props)=>{ return ( <div> <h1 className={cssObj.title}>评论列表</h1> </div> ) } export default Cmtlist
4.使用styled-components
优点: 使用模板字符串标签+样式组合后是一个大写字母开头表示的组件,比如可以说是将react开发中最流行的一些写法整合起来,对于React开发者来说,是非常好入手的。那么,在react组件中,使用外部css还是组件css,不同的开发者习惯不同。
使用:
需要安装styled-components
npm i styled-components或者yarn add styled-components
vscode安装插件便于书写
4.1初步使用
import 'antd/dist/antd.less' import styled from 'styled-components' function App() { const HomeWrapper=styled.div` font-size:50px; color:red; span{ color:orange; &.active{ color:green; } &:hover{ color:blue; font-size:40px; } &::after{ content:'ssss' } } ` return ( <div className="App"> <h1 >我是一个标题</h1> <HomeWrapper> <h2>我是一个副标题</h2> <span>轮播1</span> <span className="active">轮播2</span> <span>轮播3</span> <span>轮播4</span> </HomeWrapper> </div> ); } export default App;
4.2通过attrs设置属性
import 'antd/dist/antd.less' import styled from 'styled-components' function App() { const ChangeInput=styled.input.attrs({ placeholder:'wangsu', bgColor:'red' })` background-color:#7a7ab4; color:${props=>props.bgColor} ` return ( <div className="App"> <h1 >我是一个标题</h1> <ChangeInput type="text"/> </div> ); } export default App;
4.3css继承
import React, { Component } from 'react' import styled from 'styled-components' const HYbutton=styled.button` color:red; border:1px solid #ccc; padding:10px 20px; ` //这里使用继承 const XLbutton=styled(HYbutton)` background-color:blue; ` export default class Button extends Component { render() { return ( <div> <HYbutton>这是一个按钮</HYbutton> <XLbutton>这是一个继承按钮</XLbutton> </div> ) } }
这几天在开发项目时,一直使用的这种方式,感觉很新颖,虽然社区各有争议,但是个人喜欢这种方式设置css,完全不用考虑全局的样式问题
以上就是如何用react优雅的书写CSS的详细内容,更多关于react 书写CSS的资料请关注我们其它相关文章!
赞 (0)