服务器之家

服务器之家 > 正文

如何用react优雅的书写CSS

时间:2022-03-03 16:57     来源/作者:ws_qy

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就可以了

如何用react优雅的书写CSS

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安装插件便于书写

如何用react优雅的书写CSS

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的资料请关注服务器之家其它相关文章!

原文链接:https://juejin.cn/post/6950127217699455012

标签:

相关文章

热门资讯

2022年最旺的微信头像大全 微信头像2022年最新版图片
2022年最旺的微信头像大全 微信头像2022年最新版图片 2022-01-10
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
返回顶部