React中使用styled-components的基礎使用
摘要：
今天準備來給大家分享分享React中styled-components的基礎使用， 僅僅是我個人的一些理解，不一定全對，有錯誤還請大佬們指出，496838236這是我qq ，有想指點我的大佬隨時加我qq好吧，要是想約我一起做保健，那我只能隨叫隨到了
好了，廢話不多說，開工
今天我們...
今天準備來給大家分享分享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;
執行結果： 
好啦，好啦今天就先到這裡吧，希望各位大佬能指教指教我，實在不想指教一起約個正規保健也是可以的好吧