即時我們在不同元件分別引入CSS檔，但打包後其實每個CSS還是會整個專案共用。
只想對單獨元件設立自己的樣式怎麼辦?
我們可以使用Styled-Components這個套件。

styled component，讓我們可以在 JSX 中撰寫 CSS 的套件。
可以幫我們在元件中避免「命名衝突」問題，也能在區分共用CSS和元件CSS。

Styled-Components基本使用

首先在專案下安裝套件

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

元件檔案中引入

import styled from "styled-components";

Styled-Component的建立方法(搭配下方code)

1. 宣告變數代表這個樣式元件（Container）
2. styled 方法
3. HTML元素名稱（div）
4. 在樣板字串中放入針對HTML元素的CSS

const Container = styled.div`
    margin-inline:auto;
    width:500px;
    height:200px;
    border:goldenrod solid 2px;`;

等於是利用styled建立的一個元件，我們可以在jsx語法中用標籤形式使用它，styled-component中可以再包覆styled-component。

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

const Container = styled.div`
    margin-inline:auto;
    width:500px;
    height:200px;
    border:goldenrod solid 2px;`;

const RedConent = styled.p`
    color:red;
    font-size: 50px;
`;

function StyleTest(prop) {
    return (
        <Container>
            <RedConent >紅色文字</RedConent>
        </Container>
    )
}

export default StyleTest;

Styled Component的prop

Styled Component其實就是一種React component，所以我們可以在Styled Component傳入prop，

元件樣式的設定能根據prop做使用或判斷。

父元件App.js

import React, { useState } from 'react';
import './App.css';
import StyleTest from './component/StyleTest'

function App() {

	//設定顏色資料
  const [color, setColor] = useState('black')

	//切換顏色的方法
  function toggle(val) {
    if (val === 'black') setColor('red')
    else setColor('black')
  }

  return (
    <div className="App">
      <button onClick={() => toggle(color)}>切換顏色</button>
      <StyleTest color={color} />
    </div>)
}

export default App;

子元件StyleTest.js，把prop.color設為color的值

把styled-component放在元件function內

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

function StyleTest(prop) {

    // styled component在元件function裡
    const Container = styled.div`
    margin-inline:auto;
    width:500px;
    height:200px;
    border:goldenrod solid 2px;
`;

    const RedConent = styled.p`
    color:${prop.color};
    font-size: 50px;
`;
    return (
        <Container>
            <RedConent >切換文字顏色</RedConent>
        </Container >
    )
}

export default StyleTest;

把styled-component宣告在function外，另外把prop傳給styled-component

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

// styled component在元件function外
const Container = styled.div`
    margin-inline:auto;
    width:500px;
    height:200px;
    border:goldenrod solid 2px;
`;

const RedConent = styled.p`
    color:${(prop) => prop.textColor};
    font-size: 50px;
`;

function StyleTest(prop) {

    return (
        <Container>
            <RedConent textColor={prop.color}>切換文字顏色</RedConent>
        </Container >
    )
}

export default StyleTest;

SCSS巢狀寫法

如果平時習慣使用SCSS，styled-components中也可以使用類似的巢狀寫法。

const List = styled.ul`
  width: 500px;
	background:black

  li {
    color: white;
    padding: 10px;
  }
`;