目录1.内联样式 2.使用import导入方式 3.CSS module模块导出 4.使用styled-components 4.1初步使用4.2通过attrs设置属性4.3css继
优点:这种方式较为简单,一目了然,给标签添加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>
)
}
}
优点:这种方式使用起来更加灵巧,类似于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;
}
优点:不会造成命名冲突,样式局部有效
缺点:太过麻烦,每次都需要模块导入导出,相当于将css所有类名作为一个对象的属性,在需要使用该对象属性时,通过调用对象属性的方式调用类名,解决css冲突的方式是给不同的类名添加前缀,类似于Vue中给style设置module
使用:
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
优点: 使用模板字符串标签+样式组合后是一个大写字母开头表示的组件,比如可以说是将react开发中最流行的一些写法整合起来,对于React开发者来说,是非常好入手的。那么,在react组件中,使用外部css还是组件css,不同的开发者习惯不同。
使用:
需要安装styled-components
npm i styled-components或者yarn add styled-components
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;
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;
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的资料请关注编程网其它相关文章!
--结束END--
本文标题: 如何用react优雅的书写CSS
本文链接: https://lsjlt.com/news/123716.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0