styled components是 React 和 React Native 開發人員構建的React css library，是一個 CSS-in-JS 樣式框架。編寫CSS像是在做Component一樣， Create一個簡單且可重複使用的 <樣式 />組件可以在整個應用程序中使用。它使用 ES6 中的模版字符串編寫CSS 樣式碼， 將CSS元素透過模版字符串反引號``之間編寫樣式，更可以透過 ${...}中放入function用 props來動態決定樣式。

安装和使用

Step1:安裝styled components

 npm i styled-components

Step2:導入 styled-components 並創建一個樣式組件，在模版字符串反引號``之間編寫樣式碼

import styled from "styled-components";

export const Container = styled.div`
   width:1000px;
   max-width:100%;
   background-color:# 69DADB;
   padding:0 20px;
   margin:0 auto;

Step3：在程式中導入樣式組件使用

import {Container} from './Components/styles/Container.styled';

const App = () => {
  return (   
    <div>
      <Container>
      <h1>Hello</h1>
      </Container>
    </div>

補充說明：

1. Container = styled.div
   ( styled.可接任何<tag>，EX: styled.span styled.button )

2.樣式碼加 :hover 的編寫方式

 &:hover{
      background-color:black;
  }

3.可以使用${(props)=>props，樣式的屬性由使用方決定，使用更彈性。
Ex:

     background-color:${(props)=>props.bg}; 
     或是 background-color:${({bg}) => bg}; 

      <Header bg =  '#69DADB' '>           
          <h1>背景顏色由這邊定義</h1> 
      </Header>

4.ThemeProvider 主題樣式

藉由 ThemeProvider 可以簡單更換整個網頁的主題樣式

step1：先引入

 import { ThemeProvider } from 'styled-components';

step2.<ThemeProvider theme>要放置在最外圍，

<ThemeProvider  theme = {theme}>
    <>      
      <Container>
      <h1> </h1>
      </Container>    
    </>
    </ThemeProvider>

step3.設定theme用來設定主題的色彩或任可樣式

const  theme = {
  colors:{
    Header:'#DBD0C0',
    body: '#F9E4C8',
    fooder:'#F9CF93',
  },
}

step4.在樣式組件中使用

background-color:${({theme}) => theme.colors.header};

5.GlobalStyle 全域的 Style 設定

EX:

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');

*{
    font-family: 'Nunito Sans', sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
    text-transform: capitalize;
}
body {
    background:${({theme}) => theme.colors.body};    
    }
`
export  default GlobalStyles;

在App.js引入

import GlobalStyles from './Components/styles/Global';
const App = () => {
  return (
    <ThemeProvider theme = {theme}>
    <>
      <GlobalStyles />
      <Header />
      <Container>
      <h1> </h1>
      </Container>    
    </>
    </ThemeProvider>
  )
}

建議

VS Code Extensions可以安裝vscode-styled-components樣式組件擴充，在輸入樣式時比較方便

vscode-styled-components網址