Day29 React - Styled-Components

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>

补充说明：

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>
  )
}