介紹

它是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的新同學們有幫助~~~