【react】---styled-components的基本使用---【WangQi】

一、官網地址
　　https://www.styled-components.com/

二、styled-components

　　1、styled-components 樣式化組件，主要作用是它可以編寫實際的CSS代碼來設計組件樣式，也不需要組件和樣式之間的映射，即創建后就是一個正常的React 組件，並且可以附加樣式給當前組件。 優化react組件

　　2、在一個組件內會將結構、樣式和邏輯寫在一起，雖然這違背了關注點分離的原則，但是這有利於組件間的隔離。為了順應組件化的潮流

　　3、使用styled-components不需要再使用className屬性來控制樣式，而是將樣式寫成更具語義化的組件的形式

　　4、使用style-components會隨機生成一個class名稱，這樣不會污染到全局變量，當然因為隨機生成，維護會增加難度

 

三、基本使用

　　1、安裝

　　cnpm i styled-components -S    ||    yarn add styled-components

　　2、引入

　　import styled from "styled-components";

　　3、使用

export const Header = styled.div`
  width:100%;
  height:1rem;
  background:red      
`

import {Header} from "./style/index";
class App extends Component{
　　render(){
　　　　return (
　　　　　　<Header/>
　　　　)
　　}
}

 

四、全局默認樣式引入

引入新的API createGlobalStyle ，在下面創建一個 GlobalStyle 變量，用 createGlobalStyle 方法把全局樣式包裹在其中import { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle`

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, c{ border:none; } img{display: block;} address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } ul, ol ,li{ list-style:none; } body { color:#333; font:12px BASE "SimSun","宋體","Arial Narrow",HELVETICA; background:#fff;} a { color:#666; text-decoration:none; } *{box-sizing:border-box}
 body,html,#root{ height: 100%; overflow: hidden; } `


//將 <GlobalStyle /> 組件放在 render() 中最外層元素下面

 
            
              import React, { Component ,Fragment} from 'react'; 
             
            
              import {GlobalStyle} from "./reset"; 
             
            
              class App extends Component { 
             
            
              　　render() { 
             
            
              　　　　return ( 
             
            
              　　　　　　<Fragment> 
             
            
              　　　　　　　　<GlobalStyle/> 
             
            
              　　　　　　</Fragment> 
             
            
              　　　　); 
             
            
              　　} 
             
            
              } 
             
            
 
            
              export default App; 
             
           

 

五、傳參

　如果我們需要動態改變元素的樣式，則可以通過傳遞參數的方式進行改變

import {Header} from "style/index.js"

render(){
  return (
        <Header bgColor="red"/>  
    )  
}


style/index.js

import styled from "styled-components";
export const Header = styled.div`
　　width:100px;
　　height:200px;
　　props.bgColor}
`

 

 六、繼承

　　如果我們需要繼承樣式的時候我們可以通過 styled(繼承的組件名稱)``

const button = styled.button`
  border:0;
  width:100px;
  height:40px;
  text-align:center;
  color:#000;      
`

export const StyledButton = styled(button)`
  color:#fff;  
`

 

 七、修改組件內部標簽

　　在調用組件的時候我們可以通過as來修改組件  as="元素名稱"

render(){
  return (
    <Header as="p"/>
  )  
}    

Header組件內部渲染的時候就是用的p標簽

 

 八、定義組件屬性

export const Input = styled.input.attrs({
    value:"請輸入密碼",
    name:"input"
})`
  border:0;
  width:100px;
  height:100px;

`

九、背景圖片引入

import logo from "./imgs/logo.png";

export const BgLogo =  styled.div`
  width:100px;
  height:200px;
  background:url(${logo}) no-repate;  
`

十、塑造組件

　　有一種情況，一些原本就已經是組件，需要給這些組件添加樣式，這時需要用到塑造組件

import React from "react";
import styled from "styled-components";

const Link = ({className,children})=>(
        <a className={className}>
             {children}
         </a>   
)    


export StyleLink = styled(Link)`
  color:red  
`

十一、動畫

const move = keyframes`
  0%{
         transform:rotate(0%);  
   }  

  100%{
     transform :rotate(100%);

  }
`


export const TransFormDiv = styled.div`
   width:100px;
   height:100px;
   background:red;
   animation:${move} 2s;

`

 

十二、當標簽過多時需要划分太多組件，我們可以通過以下寫法來簡化組件的編寫

　　&代表父級

export const StyledUl = styled.ul`
    border:1px solid #ccc;
    >li{
         border-bottom:1px solid #green;
         line-height:30px;
         padding-left:20px;      
        &>p{
            color:red

         }
    }  

`