js類庫(kù)styled-components快速入門教程
更新時(shí)間：2022年06月24日 15:48:13 作者：宇cccc
這篇文章主要為大家介紹了js類庫(kù)styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
styled-components 是什么？
styled-components 是一個(gè)常用的 css in js 類庫(kù)。和所有同類型的類庫(kù)一樣，通過(guò) js 賦能解決了原生 css 所不具備的能力，比如變量、循環(huán)、函數(shù)等。
相對(duì)于其他預(yù)處理有什么優(yōu)點(diǎn)？
- 諸如 sass&less 等預(yù)處理可以解決部分 css 的局限性，但還是要學(xué)習(xí)新的語(yǔ)法，而且需要對(duì)其編譯，其復(fù)雜的 webpack 配置也總是讓開(kāi)發(fā)者抵觸。
- 如果有過(guò)sass&less的經(jīng)驗(yàn)，也能很快的切換到styled-components，因?yàn)榇蟛糠终Z(yǔ)法都類似，比如嵌套，& 繼承等， styled-componens 很好的解決了學(xué)習(xí)成本與開(kāi)發(fā)環(huán)境問(wèn)題，很適合 React 技術(shù)棧 && React Native 的項(xiàng)目開(kāi)發(fā)。
解決了什么問(wèn)題？
- className 的寫(xiě)法會(huì)讓原本寫(xiě)css的寫(xiě)法十分難以接受
- 如果通過(guò)導(dǎo)入css的方式 會(huì)導(dǎo)致變量泄露成為全局 需要配置webpack讓其模塊化
- 以及上面提到的解決了原生 css 所不具備的能力，能夠加速項(xiàng)目的快速開(kāi)發(fā)
官方文檔
https://styled-components.com/docs
安裝
npm install --save styled-components
編輯器智能提示
2018-06-11更新
- webstorm需要安裝 styled-component 插件
- vscode已支持智能提示
最基礎(chǔ)的使用
import styled from 'styled-components'
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// 相當(dāng)于 const Title = styled.h1(xx)
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
render () {
return (
<Wrapper>
<Title>Hello styled-components</Title>
</Wrapper>
)
}
此時(shí)我們可以看到控制臺(tái)中輸出了一個(gè)隨機(jī)的className，這是styled-components幫我們完成的. 注意: 組件名要以大些開(kāi)頭 不然會(huì)被解析成普通標(biāo)簽
傳遞props
const Button = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
在組件傳遞的props都可以在定義組件時(shí)獲取到，這樣就很容易實(shí)現(xiàn)定制某些風(fēng)格組件
props高級(jí)用法
設(shè)置默認(rèn)值，在未設(shè)定必須傳值的情況下我們會(huì)給一個(gè)默認(rèn)值(defaultProps)
export default class ALbum extends React.Component {
constructor (props) {
super(props)
this.state = {
// 接收傳遞的值
imgSrc: props.imgSrc
}
}
render () {
const {imgSrc} = this.state
return (
<Container imgSrc={imgSrc}>
</Container>
)
}
}
// 在這里是可以拿到props的
const Container = styled.div`
background-size: cover;
background-image: url(${props => props.imgSrc});
width: 100%;
height: 300px;
`
// 當(dāng)然沒(méi)傳值也沒(méi)關(guān)系 我們?cè)O(shè)置默認(rèn)值
Container.defaultProps = {
imgSrc: Cover
}
塑造組件
這個(gè)非常有用 你可能會(huì)遇到一些原本就已經(jīng)是組件了 但是你要為他添加一些樣式，這時(shí)候該怎么辦呢 ?
// 傳遞className 在react-native 中要使用 style
const Link = ({className , children}) => (
<a className={className}>
{children}
</a>
)
const StyledLink = styled(Link)`
color: palevioletred;
`
render(
<div>
<Link>普通組件</Link>
<StyledLink>有顏色嗎？</StyledLink>
</div>
);
組件樣式繼承
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const TomatoButton = Button.extend`
color: tomato;
border-color: tomato;
`;
// TomatoButton 部分樣式繼承自 Button 這種情況下不會(huì)生成兩個(gè)class
改變組件標(biāo)簽
在閑的蛋疼的情況下 我們想要改變組件的標(biāo)簽 比如把 button 變成 a 標(biāo)簽
// 利用上面定義的 Button 組件 調(diào)用 withComponent 方法
const Link = Button.withComponent('a')
維護(hù)其他屬性
在某種情況下，我們可能需要用到第三方庫(kù)樣式，我們可以使用這個(gè)方法輕松達(dá)到
const Input = styled.input.attrs({
// 定義靜態(tài) props
type: 'password',
// 沒(méi)傳默認(rèn)使用 1em
margin: props => props.size || '1em',
padding: props => props.size || '1em'
})`
color: palevioletred;
font-size: 1em;
border: 2px solid palevioletred;
border-radius: 3px;
// 動(dòng)態(tài)計(jì)算props
margin: ${props => props.margin};
padding: ${props => props.padding}
`
render ( <Input size='1em'></Input> <Input size='2em'></Input> )
動(dòng)畫(huà)
動(dòng)畫(huà)會(huì)生成一個(gè)隨機(jī)類名 而不會(huì)污染到全局
import { keyframes } from 'styled-components'
// CSS 動(dòng)畫(huà)
const rotate360 = keyframes`
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
`
const Rotate = Button.extend`
animation: ${rotate360} 2s linear infinite;
`
render ( <Rotate> ?? </Rotate> )
結(jié)語(yǔ)
styled-components雖然解決了大部分問(wèn)題，增加了可維護(hù)性，但是破壞了原生體驗(yàn)，時(shí)常我們需要寫(xiě)更多的代碼來(lái)達(dá)到業(yè)務(wù)要求，希望未來(lái)有更好的方案，更多關(guān)于js類庫(kù)styled-components的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js類庫(kù)styled-components快速入門教程
這篇文章主要為大家介紹了js類庫(kù)styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程
RequireJS庫(kù)的主旨就是一個(gè)js文件的模塊加載器,可以獨(dú)立于框架來(lái)進(jìn)行使用,這里我們整理了使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程,需要的朋友可以參考下2016-06-06
Highcharts 是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù), 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過(guò)本文的介紹及實(shí)例一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下2017-02-02
這篇文章主要介紹了如何使用可視化庫(kù)gojs及使用時(shí)的小技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2022-01-01
最近因?yàn)樾难獊?lái)潮想要試試thinkJS操作mongoDB，去官方文檔看了看，默認(rèn)是只給了mysql的配置，源代碼也是沒(méi)有配置mongo的，只有一個(gè)官方案例，無(wú)奈只能自己學(xué)習(xí)了，下面是自己的一些學(xué)習(xí)總結(jié)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
這篇文章主要介紹了淺談?shì)p量級(jí)js模板引擎simplite的簡(jiǎn)介和用法的相關(guān)資料,需要的朋友可以參考下2015-02-02
本篇將先介紹創(chuàng)建較為常用的物體：網(wǎng)格，然后介紹如何修改物體的屬性。下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)。2016-08-08
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說(shuō) Highcharts 是靈活多變，細(xì)節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。2016-08-08
本文為大家分享了5個(gè)不錯(cuò)的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡(jiǎn)單的上傳插件將為我們節(jié)省很多開(kāi)發(fā)時(shí)間2018-09-09