Day21 React Styled-Components 元件自己的CSS

即时我们在不同元件分别引入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;
  }
`;