1.styled components官網網址 https://www.styled-components.com/docs   以元件的形式來寫樣式。 1.1安裝 yarn add styled-components 1.2 寫法依託於ES6和webpack。    

2.Getting Started萬物皆元件

  把樣式定義在元件中 import styled from 'styled-components'   const Title

= styled.h1`          //h1是標籤名，就是<h1></h1> font-size: 1.5em; text-align: center; color: palevioletred; `   const Wrapper = styled.section` padding: 4em; background: papayawhip; `   export { Title, Wrapper }       在正式檔案中引入把樣式定義成元件的檔案。 import { Wrapper，Title

}  from ’......‘   class App extends Component{     render（）{          < Wrapper>                < Title>hello<Title>          </ Wrapper

>     } }  

 

 

3.Adapting based on props適配屬性

給標籤傳遞屬性，在樣式元件中去接這個屬性。 import styled from 'styled-components'   const Title = styled.h1` font-size: 1.5em; text-align: center; color: ${props => props.color};               //在元件內部寫一個箭頭函式來接收引數。通過props獲得父元件傳過來的引數 background: ${props => props.primary ? "palevioletred" : "white"}; `   const Wrapper = styled.section` padding: 4em; background: papayawhip; `   export { Title, Wrapper }   在正式檔案中引入把樣式定義成元件的檔案。 import {Wrapper，Title}  from ’......‘   class App extends Component{     render（）{          <Wrapper>                <Title color=‘red’ primary>hello<Title>       //寫一個屬性，往樣式元件中傳參。          </Wrapper>     } }  

4.Extending Styles擴充套件樣式

用途：1.繼承樣式，在原有的樣式基礎上做一些更新。       2.定義好一組樣式，想把這組樣式應用到另外一組樣式上去。   import styled from 'styled-components'   const Button = styled.button`   color: palevioletred;   font-size: 1em;   margin: 1em;   padding: 0.25em 1em;   border: 2px solid palevioletred;   border-radius: 3px; `   const TomatoButton = styled( Button)`         //此元件繼承上一個元件樣式，並增加新的樣式   color: tomato;   border-color: tomato; `   export {   Button,   TomatoButton }   在正式檔案中引入把樣式定義成元件的檔案。 import {Button，TomatoButton}  from ’......‘   class App extends Component{     render（）{          <div>              <Button as="a">按鈕</Button>       //as的用處是我們可以定義好一個樣式元件，用as換成另外一個標籤，如這個就換成了a標籤。               <TomatoButton>按鈕</TomatoButton>          </div>     } }    

5.Styling any components樣式化很多元件

import React from 'react' import styled from 'styled-components'   const Link = (props) => (               //普通元件，不是樣式元件   <div>      <a className={props.className}>       //必須寫，需要用它接收一下增強的樣式。          {props.children}                //children可以拿到插槽裡的內容      </a>       <a>           {props.children}       </a>    </div> )   const StyledLink = styled ( Link)`      //給Link定義樣式，給本來沒有樣式的元件加上樣式   color: palevioletred;   font-weight: bold; `   export {    Link,    StyledLink }   在正式檔案中引入把樣式定義成元件的檔案。 import {Link，StyledLink}  from ’......‘   class App extends Component{     render（）{          <div>              <StyledLink>hello</StyledLink>          </div>     } }  

6.Passed props傳遞屬性、預設屬性

import styled from 'styled-components'   const Input = styled('input')`   padding: 0.5em;   margin: 0.5em;   color: ${ props => props.inputColor };   background: papayawhip;   border: none;   border-radius: 3px; `   export {   Input }   在正式檔案中引入把樣式定義成元件的檔案。 import {Input}  from ’......‘   class App extends Component{     constructor(){          super()          this.state ={              value:"aaa"         }     }       render（）{          <div>               <Input defaultValue={this.state.value}></Input>  //給input框設定一個預設值。 自定義一個屬性，會繼承下去，很重要哦！              <Input inputColor="rebeccapurple"></Input>          </div>     } }  

7.Coming from CSS直接引css

import React from 'react' import styles from './styles.css'   export default class Counter extends React.Component {   state = { count: 0 }     increment = () => this.setState({ count: this.state.count + 1 })   decrement = () => this.setState({ count: this.state.count - 1 })     render() {     return (       <div className= {styles.counter}>         <p className={styles.paragraph}>{this.state.count}</p>         <button className={styles.button} onClick={this.increment}>           +         </button>         <button className={styles.button} onClick={this.decrement}>           -         </button>       </div>     )   }}  

8.Attaching additional props連結額外元件在props上

import styled from 'styled-components'   const StyledDiv = styled.div.attrs({    //給標籤加自己的屬性，但不能是自定義屬性。   title: 'aaa',   id: 'bbb',   'data-src': (props) => props.hello         //可以進行欲新增。 })` font-size: 100px; > span { font-size: 50px; } & > span { font-size: 25px; } `   export { StyledDiv } 在正式檔案中引入把樣式定義成元件的檔案。 import {StyledDiv}  from ’......‘   class App extends Component{       render（）{         return（             <StyleDiv hello="hi'>                 hello                     <span>hahah</span>             </StyleDiv>      ） }