如何用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的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- None Found