Styled-Components

ingood 發(fā)布于2019-08-29 15:15 / 891人閱讀

摘要：它是通過(guò)改變編寫(xiě)方式的解決方案之一，從根本上解決常規(guī)編寫(xiě)的一些弊端。通過(guò)來(lái)為賦能，我們能達(dá)到常規(guī)所不好處理的邏輯復(fù)雜函數(shù)方法復(fù)用避免干擾。他搭配可能將模塊化走向一個(gè)更高的高度，樣式書(shū)寫(xiě)將直接依附在上面，三者再次內(nèi)聚。

Styled-Components

它是通過(guò)JavaScript改變CSS編寫(xiě)方式的解決方案之一，從根本上解決常規(guī)CSS編寫(xiě)的一些弊端。
通過(guò)JavaScript來(lái)為CSS賦能，我們能達(dá)到常規(guī)CSS所不好處理的邏輯復(fù)雜、函數(shù)方法、復(fù)用、避免干擾。
盡管像SASS、LESS這種預(yù)處理語(yǔ)言添加了很多用用的特性，但是他們依舊沒(méi)有對(duì)改變CSS的混亂有太大的幫助。因此組織工作交給了像 BEM這樣的方法，雖然比較有用，但是它完全是自選方案，不能被強(qiáng)制應(yīng)用在語(yǔ)言或者工具層面。
他搭配React可能將模塊化走向一個(gè)更高的高度，樣式書(shū)寫(xiě)將直接依附在JSX上面，HTML、CSS、JS三者再次內(nèi)聚。

基本安裝

npm install --save styled-components

除了npm安裝使用模塊化加載包之外，也支持UMD格式直接加載腳本文件。

入門(mén)

styled-components使用標(biāo)簽?zāi)０鍋?lái)對(duì)組件進(jìn)行樣式化。

它移除了組件和樣式之間的映射。這意味著，當(dāng)你定義你的樣式時(shí)，你實(shí)際上創(chuàng)造了一個(gè)正常的React組件，你的樣式也附在它上面。

這個(gè)例子創(chuàng)建了兩個(gè)簡(jiǎn)單的組件，一個(gè)容器和一個(gè)標(biāo)題，并附加了一些樣式。

// Create a Title component that"ll render an  tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that"ll render a  tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they"re styled!
render(
  
    
      Hello World, this is my first styled component!
    
  
);

注意
CSS規(guī)則會(huì)自動(dòng)添加瀏覽器廠商前綴，我們不必考慮它。

透?jìng)鱬rops

styled-components會(huì)透?jìng)魉械膒rops屬性。

// Create an Input component that"ll render an  tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with a placeholder of "@mxstbr", and one with a value of "@geelen"
render(
  
    
    
  
);

基于props做樣式判斷

模板標(biāo)簽的函數(shù)插值能拿到樣式組件的props，可以據(jù)此調(diào)整我們的樣式規(guī)則。

const Button = styled.button`
  /* Adapt the colours based on primary prop */
  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(
  
    
    
  
);

樣式化任意組件

// This could be react-router"s Link for example
const Link = ({ className, children }) => (
  
    {children}
  
)

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  
    Unstyled, boring Link
    

    Styled, exciting Link
  
);

擴(kuò)展樣式

我們有時(shí)候需要在我們的樣式組件上做一點(diǎn)擴(kuò)展，添加一些額外的樣式：
需要注意的是.extend在對(duì)樣式組件有效，如果是其他的React組件，需要用styled樣式化一下。

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We"re extending Button with some extra styles
const TomatoButton = Button.extend`
  color: tomato;
  border-color: tomato;
`;

render(
  
    
    Tomato Button
  
);

在極少特殊情況下，我們可能需要更改樣式組件的標(biāo)簽類(lèi)型。我們有一個(gè)特別的API，withComponent可以擴(kuò)展樣式和替換標(biāo)簽：

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We"re replacing the 
    Normal Link
    Tomato Link

); 添加attr

我們可以使用attrsAPI來(lái)為樣式組件添加一些attr屬性，它們也可以通過(guò)標(biāo)簽?zāi)０宀逯岛瘮?shù)拿到props傳值。

const Input = styled.input.attrs({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  margin: props => props.size || "1em",
  padding: props => props.size || "1em"
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed props */
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;

render(
  
    
    

    
  
);

動(dòng)畫(huà)

帶有@keyframes的CSS animations，一般來(lái)說(shuō)會(huì)產(chǎn)生復(fù)用。styled-components暴露了一個(gè)keyframes的API，我們使用它產(chǎn)生一個(gè)可以復(fù)用的變量。這樣，我們?cè)跁?shū)寫(xiě)css樣式的時(shí)候使用JavaScript的功能，為CSS附能，并且避免了名稱(chēng)沖突。

// keyframes returns a unique name based on a hash of the contents of the keyframes
const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(
  <