1稀拐、CSS樣式
一火邓、內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是官方推薦的一種css樣式的寫法:
- style 接受一個采用小駝峰命名屬性的 JavaScript 對象，钩蚊，而不是 CSS 字符串;
- 并且可以引用state中的狀態(tài)來設置相關的樣式;
內(nèi)聯(lián)樣式的優(yōu)點:
- 內(nèi)聯(lián)樣式, 樣式之間不會有沖突
- 可以動態(tài)獲取當前state中的狀態(tài)
內(nèi)聯(lián)樣式的缺點:
- 1.寫法上都需要使用駝峰標識
- 2.某些樣式?jīng)]有提示
- 3.大量的樣式, 代碼混亂
- 4.某些樣式無法編寫(比如偽類/偽元素)
二贡翘、普通的css
- 普通的css我們通常會編寫到一個單獨的文件，之后再進行引入砰逻。
- 這樣的編寫方式和普通的網(wǎng)頁開發(fā)中編寫方式是一致
- 這種編寫方式最大的問題是樣式之間會相互層疊掉;
// style.css
#app > .title { // app 下的title className
color: red;
}
三鸣驱、css modules
-
css modules并不是React特有的解決方案，而是所有使用了類似于webpack配置的環(huán)境下都可以使用的蝠咆。
- 如果在其他項目中使用個踊东，那么我們需要自己來進行配置，比如配置webpack.config.js中的modules: true等
-
React的腳手架已經(jīng)內(nèi)置了css modules的配置:
- css/.less/.scss 等樣式文件都修改成 .module.css/.module.less/.module.scss 等
css modules確實解決了局部作用域的問題
-
但是這種方案也有自己的缺陷:
- 引用的類名刚操，不能使用連接符(.home-title)闸翅，在JavaScript中是不識別的;
- 所有的className都必須使用{style.className} 的形式來編寫;
- 不方便動態(tài)來修改某些樣式，依然需要使用內(nèi)聯(lián)樣式的方式;
// styled.module.css
.title {
font-size: 30px;
color: blue;
}
.banner {
color: orange;
}
四菊霜、CSS in JS
“CSS-in-JS” 是指一種模式坚冀，其中 CSS 由 JavaScript 生成而不是在外部文件中定義;
注意此功能并不是 React 的一部分，而是由第三方庫提供鉴逞。 React 對樣式如何定義并沒有明確態(tài)度;
- 在傳統(tǒng)的前端開發(fā)中记某，我們通常會將結構(HTML)、樣式(CSS)构捡、邏輯(JavaScript)進行分離
- 但是在前面的學習中液南，我們就提到過，React的思想中認為邏輯本身和UI是無法分離的勾徽，所以才會有了JSX的語法
- 樣式也是屬于UI的一部分
- 事實上CSS-in-JS的模式就是一種將樣式(CSS)也寫入到JavaScript中的方式滑凉，并且可以方便的使用JavaScript的狀態(tài)
- 所以React有被人稱之為 All in JS;
2、styled-components
CSS-in-JS通過JavaScript來為CSS賦予一些能力喘帚，包括類似于CSS預處理器一樣的樣式嵌套畅姊、函數(shù)定義、邏輯復用吹由、動態(tài)修
改狀態(tài)等等;
依然CSS預處理器也具備某些能力涡匀，但是獲取動態(tài)狀態(tài)依然是一個不好處理的點;
所以，目前可以說CSS-in-JS是React編寫CSS最為受歡迎的一種解決方案;
- 目前比較流行的CSS-in-JS的庫有溉知，styled-components、emotion、glamorous
- 前可以說styled-components依然是社區(qū)最流行的CSS-in-JS庫
- 安裝styled-components：
yarn add styled-components
1级乍、styled的樣式繼承關系
import React, { PureComponent } from 'react'
import Profile from '../profile'
import Home from '../home'
import styled, {ThemeProvider} from 'styled-components'
const HYButton = styled.button`
padding: 10px 20px;
color: red;
`
const HYPrimaryButton = styled(HYButton)`
font-size: 10;
`
export default class App extends PureComponent {
render() {
return (
<ThemeProvider id="app" theme={{themeColor: "green", fontSize: "30px"}}>
<Home />
<Profile />
<HYButton>我是一個普通的按鈕</HYButton>
<HYPrimaryButton>我我一個高級按鈕</HYPrimaryButton>
</ThemeProvider>
)
}
}
2舌劳、styled元素中的不同狀態(tài)
// style.js
import styled from 'styled-components'
// span 的狀態(tài)為active hover after,寫法加&
// 可以給尾內(nèi)和尾部添加元素:: aaa
export const HomeWrapper = styled.div`
font-size: 50px;
color: red;
.banner {
background-color: blue;
span {
color: #fff;
&.active {
color: #f00;
}
&:hover {
color: green;
}
&::after {
content: "aaa";
}
}
}
`
// ThemeProvider屬性獲取
export const TitleWrapper = styled.h2`
text-decoration: underline;
font-size: ${props => props.theme.fontSize};
color: ${props => props.theme.themeColor};
`
// index.js
import React, { PureComponent } from 'react'
import {HomeWrapper, TitleWrapper} from './style'
export default class Home extends PureComponent {
render() {
return (
<HomeWrapper >
<TitleWrapper >我是Home的標題</TitleWrapper>
<div className="banner">
<span className="active">輪播圖1</span>
<span>輪播圖2</span>
<span>輪播圖3</span>
</div>
</HomeWrapper>
)
}
}
3、props傳遞屬性
import React, { PureComponent } from 'react'
import styled from 'styled-components'
import sytled from 'styled-components'
/** 標簽模板字符串
* 1玫荣、props穿透
* 2甚淡、attrs的使用
* 3、傳入state作為props屬性
*/
const HYInput = styled.input.attrs({
placeholder: "coderwhy",
bColor: "yellow" // 設置bColor變量
})`
background-color: green;
border-color: ${props => props.bColor};
color: ${props => props.color};
`
export default class Profile extends PureComponent {
constructor(props) {
super(props);
this.state = {
color: "yellow"
}
}
render() {
return (
<div >
<input type={"password"}></input>
<HYInput type={"text"} color={this.state.color}></HYInput>
<h2 >我是Profile的標題</h2>
<ul >
<li>設置列表1</li>
<li>設置列表2</li>
<li>設置列表3</li>
<li>設置列表4</li>
</ul>
</div>
)
}
}
