react之styled-components(基礎篇)
阿新 • • 發佈:2018-11-24
介紹
它是react的一個庫,可以用來美化元件
它的寫法依賴於es6,依賴於webpack
安裝
-yarn add styled-components
基本使用的一些方法
-as
-Adapting based on props
-Extending Styles
-Styling-any-components
-Passed props
-Coming from CSS
-Attaching-additional-props
基礎起步
const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; ` //這個就相當於你建立了一個h1標籤,並且賦給了它樣式 使用:<Title>這個Title就相當於你的h1標籤</Title> //在瀏覽器是它就是一個<h1></h1>
一、Adapting based on props //適應基於你穿過來的值
1.傳一個屬性值
<Title primary={"#fff"}>白俊鵬</Title>
接收:color: ${props=>props.primary};
2.接收的時候還可以用表示式
<Wrapper bacg={"red"} />
接收:background: ${props=>props.bacg?"#000":"blue"}; //結果頁面會變成黑色
二、Extending Styles //擴充套件樣式
用來繼承或者給某個元件新增新的功能,只需要將其包裹在styled()建構函式中即可(相同屬性會覆蓋,不同會新增)
const Button = styled.button` padding: 0.25em 1em; border: 2px solid palevioletred; `; //這個是要被包裝的button const TomatoButton = styled(Button)` color: tomato; border-color: tomato; background:tomato; `; //這個就是包裝後的Button,TomatoButton會繼承Button的其他屬性,同時也會新增color和背景屬性,邊框顏色會覆蓋
按鈕轉換成a標籤 //通過這種方式還可以將Button標籤轉換成a標籤,還可以加連結
三、Styling-any-components //設計任何元件的樣式
const Link = (props) => (
<div>
<a className={props.className}>
{props.children}
</a>
</div>
)
將Link進行修改美化
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
` //StyledLink就是一個美化後的Link
四、Passed props 傳遞一些屬性
這個方法可以讓我們去給某個元素傳遞一些屬性,用的時候就很方便
const Input = styled('input')`
padding: 0.5em;
margin: 0.5em;
color: ${ props => props.inputColor };
background: papayawhip;
border: none;
border-radius: 3px;
`
使用:<Input defaultValue="哈哈哈" type="text" inputColor="red"/> //現在的input框就變得很好看,注意使用defaultValue屬性可以對輸入框進行輸入
五、Attaching additional props //可以通過attrs建構函式來將其他道具或屬性附加到元件
-你的元件標籤:<StyledDiv hello="hi" />
-來給它加一些自定義屬性:
const StyledDiv = styled.div.attrs({
title: 'aaa',
id: 'bbb',
'data-src': (props) => props.hello
})
希望能對想要學習styled-components的新同學們有幫助~~~