React中使用styled-components的基礎使用

今天准備來給大家分享分享React中styled-components的基礎使用，僅僅是我個人的一些理解，不一定全對，有錯誤還請大佬們指出，496838236這是我qq，有想指點我的大佬隨時加我qq好吧，要是想約我一起做保健，那我只能隨叫隨到了

 好了，廢話不多說，開工

　今天我們不對react的環境進行搭建，我直接用腳手架搭一個最簡單的環境來用，進入主題

　1.使用styled-components

　　首先我們要安裝styled-components

yarn add styled-components  ||  npm install --save styled-components

    2.最基礎的使用，（為了方便閱讀，以下所有的代碼我將在一個文件中演示）

　　

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//修改了div的樣式
const Title = styled.div`
  font-size:1.5rem;
  color:red
`
// 修改了button的樣式
const Button = styled.button`
    border:none;
    background-color:blue
`

class App extends Component {
  render() {
    return (
    <Fragment>
    {
    // 開始的內容
    /* <div>大紅牛</div>
    <button>枸杞11</button> */}
    <Title>大紅牛</Title>
    <Button>枸杞</Button>
    </Fragment>
    )
  }
}
export default App;

運行結果：

是不是很爽，其實到這里完全就可以用styled-components來寫類似於CSS的代碼了，但是這肯定不夠啊，所以我們繼續往下看

 

2.塑造組件

　　為什么要有塑造塑件呢，因為肯定會有一個場景，我們要對已經定義好的組件進行二次樣式的修改，那這個時候我們就需要用塑造組件了

import React, { Component,Fragment} from 'react';
//引入styled-components
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 YellowButton = styled(Button)`
  background-color:yellow
`

class App extends Component {
  render() {
    return (
    <Fragment>
      <Button>紅牛</Button>
      <YellowButton>枸杞</YellowButton>
    </Fragment>
    )
  }
}
export default App;

運行結果：

 

3.props傳遞參數  styled-components可以用props接受參數，從而根據傳遞的參數確定樣式，是不是很強大

　

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//props傳遞參數（根據參數的值設置樣式）
// 有傳遞值字體會變為紅色
// 無傳遞值會默認取藍色
const Button = styled.button`
  padding: 0.5em;
  margin: 0.5em;
  color: ${ props => props.inputColor || "blue" };
  background: papayawhip;
  border: none;
  border-radius: 3px;
`

class App extends Component {
  render() {
    return (
    <Fragment>
        <Button inputColor="red">紅牛啊</Button>
    </Fragment>
    )
  }
}
export default App;

運行結果：

除了可以根據參數的值進行樣式的設置之外，我們還可以通過參數的有無來設置樣式：

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//props傳遞參數（根據參數的有無設置樣式）
// 有參數背景會變為藍色
// 無傳遞值背景會默認取黃色
const Button = styled.button`
  padding: 0.5em;
  margin: 0.5em;
  background: ${props=>props.blue?"blue":"yellow"};
  border: none;
  border-radius: 3px;
`

class App extends Component {
  render() {
    return (
    <Fragment>
        <Button blue>紅牛啊</Button>
    </Fragment>
    )
  }
}
export default App;

運行結果：

 

4.修改樣式的同時添加屬性，同時也可以通過這種方法引入第三方的樣式，只需要設置className屬性即可

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//props傳遞參數（根據參數的有無設置樣式）
// 有參數背景會變為藍色
// 無傳遞值背景會默認取黃色
const Button = styled.button.attrs({
  title:"aaa",
  id:'bbb',
  'data-role':(props)=>props.hello
})`
  padding: 0.5em;
  margin: 0.5em;
  border: none;
  border-radius: 3px;
`

class App extends Component {
  render() {
    return (
    <Fragment>
        <Button hello="hi">紅牛啊</Button>
    </Fragment>
    )
  }
}
export default App;

運行結果：

　　通過控制台我們可以看到，屬性已經全部被加上去了

 

5.繼承

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//繼承  根據實驗 如果我沒出錯 最新的版本應該是不支持extend了
const Button = styled.button` 
      color: palevioletred; 
      font-size: 1em; 
      margin: 1em; 
      padding: 0.25em 1em; 
      border-radius: 3px; `

const YellowButton = Button.extend` 
      color: yellow;
      border-color: yellow; `;

class App extends Component {
  render() {
    return (
    <Fragment>
        <Button>紅牛啊</Button>
        <YellowButton>枸杞啊</YellowButton>
    </Fragment>
    )
  }
}
export default App;

 

6.偷懶的寫法，當標簽很多時，要是我們雖每個標簽都要進行修飾，那豈不是要寫好多的組件，但是在有些情況下我們沒必要分這木多組件，那我們不妨可以試試以下的寫法

　　

import React, { Component,Fragment} from 'react';
//引入styled-components
import styled from 'styled-components'

//另一種語法
const StyledDiv = styled.div`
  font-size: 100px;
  > span {
    font-size: 50px;
  }
  & > p {
    font-size: 25px;
  }
`

class App extends Component {
  render() {
    return (
    <Fragment>
        <StyledDiv>
            <span>紅牛</span>
            <p>枸杞</p>
        </StyledDiv>
    </Fragment>
    )
  }
}
export default App;

運行結果：

 

 

好啦，好啦今天就先到這里吧，希望各位大佬能指教指教我，實在不想指教一起約個正規保健也是可以的好吧