快捷導(dǎo)航

如何用react優(yōu)雅的書寫CSS

更新時(shí)間：2021年04月16日 08:34:19 作者：ws_qy

這篇文章主要介紹了如何用react優(yōu)雅的書寫CSS，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下

1.內(nèi)聯(lián)樣式

優(yōu)點(diǎn)：這種方式較為簡(jiǎn)單，一目了然，給標(biāo)簽添加style屬性。

缺點(diǎn): 這種方式可以造成項(xiàng)目結(jié)構(gòu)較為臃腫，造成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導(dǎo)入方式

優(yōu)點(diǎn)：這種方式使用起來更加靈巧，類似于css中的外部引入

缺點(diǎn)：因?yàn)閞eact樣式默認(rèn)是全局樣式，很有可能造成樣式?jīng)_突

使用：新建css文件，在jsx語法中通過className屬性設(shè)置類名，在css使用類名，這種方式可以使用三元表達(dá)式，通過定義變量來選擇類名。

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">點(diǎn)擊更改字體顏色</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模塊導(dǎo)出

優(yōu)點(diǎn)：不會(huì)造成命名沖突，樣式局部有效

缺點(diǎn)：太過麻煩，每次都需要模塊導(dǎo)入導(dǎo)出，相當(dāng)于將css所有類名作為一個(gè)對(duì)象的屬性，在需要使用該對(duì)象屬性時(shí)，通過調(diào)用對(duì)象屬性的方式調(diào)用類名，解決css沖突的方式是給不同的類名添加前綴，類似于vue中給style設(shè)置module

使用：

在cra腳手架中只要在父組件中引入了css樣式，那么這個(gè)樣式就是全局樣式
在react中用模塊化來解決樣式?jīng)_突的問題
在cra腳手架中，如果某個(gè)樣式文件要開啟模塊化，只需要把樣式文件命名為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}>評(píng)論列表</h1>
       
       </div>
    )
}

export default Cmtlist

4.使用styled-components

優(yōu)點(diǎn)：使用模板字符串標(biāo)簽+樣式組合后是一個(gè)大寫字母開頭表示的組件，比如可以說是將react開發(fā)中最流行的一些寫法整合起來，對(duì)于React開發(fā)者來說，是非常好入手的。那么，在react組件中，使用外部css還是組件css，不同的開發(fā)者習(xí)慣不同。

使用：

需要安裝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 >我是一個(gè)標(biāo)題</h1>
 <HomeWrapper>
 <h2>我是一個(gè)副標(biāo)題</h2>
   <span>輪播1</span>
   <span className="active">輪播2</span>
   <span>輪播3</span>
   <span>輪播4</span>
 </HomeWrapper>
    </div>
  );
}

export default App;

4.2通過attrs設(shè)置屬性

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 >我是一個(gè)標(biāo)題</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>這是一個(gè)按鈕</HYbutton>
                <XLbutton>這是一個(gè)繼承按鈕</XLbutton>
            </div>
        )
    }
}

這幾天在開發(fā)項(xiàng)目時(shí)，一直使用的這種方式，感覺很新穎，雖然社區(qū)各有爭(zhēng)議，但是個(gè)人喜歡這種方式設(shè)置css,完全不用考慮全局的樣式問題

以上就是如何用react優(yōu)雅的書寫CSS的詳細(xì)內(nèi)容，更多關(guān)于react 書寫CSS的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: