styled-components是一個常用的css in js類庫付翁。和所有同類型的類庫一樣，通過js賦能解決了原生css所不具備的能力晃听，比如變量、循環(huán)砰识、函數(shù)等能扒。
動機
- 自動關(guān)聯(lián)
css - 可以在樣式定義中直接引用到 js 變量，共享變量
- 自動生成獨立的類名辫狼，避免重復初斑、重疊或拼寫錯誤
- 簡單的動態(tài)樣式，不用寫很多類名
- 支持組件之間繼承膨处，方便代碼復用见秤，提升可維護性
- 方便樣式維護，我們只需定位到某個組件真椿，就能快速改變其樣式
安裝
執(zhí)行以下命令便能快速安裝依賴：
npm install --save styled-components
或者
yarn add styled-components
基本用法
styled-components使用標簽模板來對組件進行樣式化鹃答。
它移除了組件和樣式之間的映射。這意味著突硝，當你定義你的樣式時测摔，你實際上只是創(chuàng)建了一個普通的 React 組件，你定義的樣式也附在它上面解恰。
下面我們將寫兩個簡單的組件來說明锋八，一個容器組件Wrapper,一個標題H1。
Wrapper.js
import styled from "styled-components";
const Wrapper = styled.div`
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
background: aqua;
`;
export default Wrapper;
H1.js
import styled from "styled-components";
const H1 = styled.h1`
font-size: 32px;
font-weight: bolder;
color: chocolate;
`;
export default H1;
App.js
import React from "react";
import ReactDOM from "react-dom";
import Wrapper from "./Wrapper";
import H1 from "./H1";
function App() {
return (
<Wrapper>
<H1>Hello,This is a demo of style components!</H1>
</Wrapper>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
運行程序护盈，我們就能看到如下效果：
此時挟纱，h1應用了我們定義的樣式。
基于Props做樣式判斷
模板標簽的函數(shù)插值能拿到樣式組件的 props腐宋，可以據(jù)此調(diào)整我們的樣式規(guī)則紊服。
第一種方式：
Button.js
import styled from "styled-components";
const Button = styled.button`
min-width: 64px;
background: ${props => (props.primary ? "blue" : "transparent")};
color: ${props => (props.primary ? "white" : "palevioletred")};
font-size: 14px;
margin: 8px;
padding: 8px;
border: ${props => (props.primary ? "none" : `2px solid palevioletred`)};
border-radius: 3px;
`;
export default Button;
上述示例中如果primary屬性存在，則按鈕背景色會變成藍色脏款，邊框消失围苫，并且文字顏色變成白色，使用方式及效果如下：
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
運行效果：
此外撤师，我們還可以使用css定義一個樣式剂府，然后根據(jù)屬性判斷來調(diào)整我們的樣式規(guī)則，這就有了第二種方式：
Button.js
import styled, { css } from "styled-components";
const disabledStyle = css`
background: transparent;
color: rgba(0, 0, 0, 0.38);
border: 2px solid rgba(0, 0, 0, 0.38);
`;
const Button = styled.button`
min-width: 64px;
background: ${props => (props.primary ? "blue" : "transparent")};
color: ${props => (props.primary ? "white" : "palevioletred")};
font-size: 14px;
margin: 8px;
padding: 8px;
border: ${props => (props.primary ? "none" : `2px solid palevioletred`)};
border-radius: 3px;
${props => props.disabled && disabledStyle};
`;
export default Button;
此時剃盾，如果我們給 Button 組件一個disabled屬性腺占，則disabledStyle中的樣式會自動覆蓋原有樣式中對應的部分淤袜。
<Button disabled>Disabled Button</Button>
運行效果：
最后，我們還可以直接傳入一個樣式屬性來控制組件樣式的規(guī)則衰伯，比如铡羡，我們希望能自定義按鈕的最小寬度，此時我們可以調(diào)整Button.js為：
import styled from "styled-components";
const Button = styled.button`
min-width: ${props => props.minWidth || 64}px;
background: ${props => (props.primary ? "blue" : "transparent")};
color: ${props => (props.primary ? "white" : "palevioletred")};
font-size: 14px;
margin: 8px;
padding: 8px;
border: ${props => (props.primary ? "none" : `2px solid palevioletred`)};
border-radius: 3px;
`;
export default Button;
此時意鲸，只要我們在使用 Button 組件時烦周，給minWidth屬性賦值，按鈕就會按照我們制定的最小寬度渲染怎顾。
<Button minWidth={24}>Mini Button</Button>
擴展樣式
樣式擴展主要針對當前組件有部分樣式不滿足需求的情況读慎，此時我們可以通過樣式擴展來進行樣式調(diào)整，比如：我們希望上面例子中的 Button 組件的邊框顏色和字體顏色變成藍色槐雾，此時我們僅僅需要下面一小段代碼調(diào)整即能滿足需求：
const BlueButton = styled(Button)`
color: blue;
border: 2px solid blue;
`;
<BlueButton>Blue Button</BlueButton>
在某些場景下夭委，我們可能不僅僅只是想要修改組件的樣式，甚至想要更新組件的渲染元素募强，styled-components曾經(jīng)提供了一種方式來滿足我們的需求株灸，即.withComponent()方法。不幸的是在后續(xù)版本中擎值，此方法將會被廢棄慌烧。但令我們欣慰的是：styled-components最新版本為我們提供了一種新的方式，就是as屬性幅恋。
假設杏死，我們想要使用<a>來渲染我們的 Button 組件，我們僅僅需要在使用 Button 時捆交，賦予一個as屬性即可：
<Button as="a" >
Link Button
</Button>
運行效果：
同樣的淑翼，我們也可以使用我們自己定義的其它組件來給as屬性賦值。
自定義任意組件的樣式
styled-components實際上也是通過className的方式添加樣式品追，所以玄括，只要我們的組件有className,我們就能使用styled-components自定義其樣式。
import React from "react";
import styled from "styled-components";
const P = ({ className, children }) => <p className={className}>{children}</p>;
const CustomP = styled(P)`
color: blue;
font-size: 32px;
`;
export { P, CustomP };
App.js
<div>
<P>這是一段普通的文本內(nèi)容</P>
<CustomP>這是一段自定義樣式的文本內(nèi)容</CustomP>
</div>
運行效果：
使用.attrs添加屬性
我們可以使用attrsAPI 來為樣式組件添加一些屬性肉瓦，它們也可以通過標簽模板插值函數(shù)拿到 props 傳值遭京。
import styled from "styled-components";
const PasswordInput = styled.input.attrs({
type: "password",
margin: props => props.size || "1em",
padding: props => props.size || "1em"
})`
color: palevioletred;
font-size: 1em;
border: 2px solid palevioletred;
border-radius: 3px;
margin: ${props => props.margin};
padding: ${props => props.padding};
`;
export default PasswordInput;
App.js
<PasswordInput placeholder="請輸入密碼" size="0.25rem" />
運行效果：
動畫
帶有@keyframes的CSS animations，一般來說會產(chǎn)生復用泞莉。styled-components暴露了一個keyframes的API哪雕，我們使用它產(chǎn)生一個可以復用的變量。這樣鲫趁，我們在書寫css樣式的時候使用 JavaScript 的功能斯嚎，為CSS附能，并且避免了名稱沖突。
import styled, { keyframes } from "styled-components";
const rotateStyle = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const Rotate = styled.div`
display: inline-block;
animation: ${rotateStyle} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
export default Rotate;
App.js
<Rotate>旋轉(zhuǎn)</Rotate>
運行效果：
父組件中定義子組件樣式
styled-components提供了component selector組件選擇器模式來代替我們以往對 class 名的依賴堡僻。
開篇的示例糠惫，如果我們想要在 Wrapper 中改變H1的顏色為白色,可以有下面兩種方式：
第一種，通過h1查找钉疫，并修改樣式：
Wrapper.js
const Wrapper = styled.div`
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
background: aqua;
> h1 {
color: white;
}
`;
第二種硼讽，通過H1的組件名查找元素并修改樣式：
const Wrapper = styled.div`
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
background: aqua;
${H1} {
color: white;
}
`;
App.js
<Wrapper>
<H1>Hello,This is a demo of style components!</H1>
</Wrapper>
以上兩種方式運行效果如下：
注意：下面這種方式不支持在父組件中定義自組件樣式
class A extends React.Component {
render() {
return <div />;
}
}
const B = styled.div`
${A} {
}
`;
因為 A 繼承ReactComponent，不是被 styled 構(gòu)造過的牲阁。我們的組件選擇器只支持在Styled Components創(chuàng)建的樣式組件固阁。
附注
有時候可能由于優(yōu)先級的問題，我們自定義的樣式無法使用咨油，此時我們只需要使用&&就能提升其優(yōu)先級：
const CustomButton = styled(Button)`
&& {
width: 88px;
}
`;
總結(jié)
這篇文章主要介紹了styled-components的基本用法您炉，包括通過屬性控制樣式規(guī)則、樣式擴展役电、自定義組件樣式、使用.attrs添加屬性棉胀、動畫等法瑟，希望可以通過閱讀此文章數(shù)量掌握如何使用styled-components定義組件樣式。
