js類庫styled-components快速入門教程
更新時間：2022年06月24日 15:48:13 作者：宇cccc
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
styled-components 是什么？
styled-components 是一個常用的 css in js 類庫。和所有同類型的類庫一樣，通過 js 賦能解決了原生 css 所不具備的能力，比如變量、循環(huán)、函數(shù)等。
相對于其他預(yù)處理有什么優(yōu)點(diǎn)？
- 諸如 sass&less 等預(yù)處理可以解決部分 css 的局限性，但還是要學(xué)習(xí)新的語法，而且需要對其編譯，其復(fù)雜的 webpack 配置也總是讓開發(fā)者抵觸。
- 如果有過sass&less的經(jīng)驗，也能很快的切換到styled-components，因為大部分語法都類似，比如嵌套，& 繼承等， styled-componens 很好的解決了學(xué)習(xí)成本與開發(fā)環(huán)境問題，很適合 React 技術(shù)棧 && React Native 的項目開發(fā)。
解決了什么問題？
- className 的寫法會讓原本寫css的寫法十分難以接受
- 如果通過導(dǎo)入css的方式 會導(dǎo)致變量泄露成為全局 需要配置webpack讓其模塊化
- 以及上面提到的解決了原生 css 所不具備的能力，能夠加速項目的快速開發(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>
)
}
此時我們可以看到控制臺中輸出了一個隨機(jī)的className，這是styled-components幫我們完成的. 注意: 組件名要以大些開頭 不然會被解析成普通標(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í)現(xiàn)定制某些風(fēng)格組件
props高級用法
設(shè)置默認(rèn)值，在未設(shè)定必須傳值的情況下我們會給一個默認(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)然沒傳值也沒關(guān)系 我們設(shè)置默認(rèn)值
Container.defaultProps = {
imgSrc: Cover
}
塑造組件
這個非常有用 你可能會遇到一些原本就已經(jīng)是組件了 但是你要為他添加一些樣式，這時候該怎么辦呢 ?
// 傳遞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 這種情況下不會生成兩個class
改變組件標(biāo)簽
在閑的蛋疼的情況下 我們想要改變組件的標(biāo)簽 比如把 button 變成 a 標(biāo)簽
// 利用上面定義的 Button 組件 調(diào)用 withComponent 方法
const Link = Button.withComponent('a')
維護(hù)其他屬性
在某種情況下，我們可能需要用到第三方庫樣式，我們可以使用這個方法輕松達(dá)到
const Input = styled.input.attrs({
// 定義靜態(tài) props
type: 'password',
// 沒傳默認(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;
// 動態(tài)計算props
margin: ${props => props.margin};
padding: ${props => props.padding}
`
render ( <Input size='1em'></Input> <Input size='2em'></Input> )
動畫
動畫會生成一個隨機(jī)類名 而不會污染到全局
import { keyframes } from 'styled-components'
// CSS 動畫
const rotate360 = keyframes`
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
`
const Rotate = Button.extend`
animation: ${rotate360} 2s linear infinite;
`
render ( <Rotate> ?? </Rotate> )
結(jié)語
styled-components雖然解決了大部分問題，增加了可維護(hù)性，但是破壞了原生體驗，時常我們需要寫更多的代碼來達(dá)到業(yè)務(wù)要求，希望未來有更好的方案，更多關(guān)于js類庫styled-components的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)
本篇將介紹基本材質(zhì)以及兩種基于光照模型的材質(zhì)（Lamber與Phong），有需要的小伙伴們可以參考學(xué)習(xí)。2016-08-08
淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)
以AngularJS為代表的MVVM結(jié)構(gòu)框架或庫這兩年來在前端界真是火到不行,大有對抗傳統(tǒng)jQuery綁定思想的趨勢,這里我們結(jié)合傳統(tǒng)的MVC結(jié)構(gòu),來淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)2016-06-06
本文為大家分享了5個不錯的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡單的上傳插件將為我們節(jié)省很多開發(fā)時間2018-09-09
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。下面通過本文的介紹及實(shí)例一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細(xì)節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個重要特性的核心。2016-08-08
Highcharts是一個用純JavaScript編寫的一個圖表庫，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進(jìn)一步的介紹Highcharts的基本屬性，有需要的可以參考學(xué)習(xí)。2016-08-08
基于d3.js實(shí)現(xiàn)實(shí)時刷新的折線圖
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時刷新的折線圖,非常具有實(shí)用價值,需要的朋友可以參考下。2016-08-08
本篇將先介紹創(chuàng)建較為常用的物體：網(wǎng)格，然后介紹如何修改物體的屬性。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。2016-08-08
這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴、BaseUrl、JSONP等內(nèi)容,需要的朋友可以參考下2014-09-09