1.1 style.module.css的使用

.title {
  color: blue;
}

1.2. index.js文件引入

import React, { PureComponent } from 'react';

// 引入的方式如下:
import appStyle from './style.module.css';

import Home from '../home';
import Profile from '../profile';

export default class App extends PureComponent {
  componentDidMount() {
    console.log(appStyle);
  }
  render() {
    return (
      <div id="app">
        App
        <h2 className={appStyle.title}>我是App的title</h2>
        <Home/>
        <Profile/>
      </div>
    )
  }
}

1.3.這個(gè)style.module.css用法不支持 連接符號比如: setting-item 這種是會(huì)報(bào)錯(cuò)的

1.4 這個(gè)style.module.css用法:不支持動(dòng)態(tài)樣式邦定, 最后還是需要內(nèi)聯(lián)樣式來寫

2. Styles-components 的使用

2.1 下載 styles-components庫

 styles-components 下載命令: yarn add styled-components 

2.2 導(dǎo)入這個(gè)庫

import styled from "styled-components"

2.3 簡單使用

import React, { PureComponent } from 'react'
import styled from "styled-components"


const HomeWrapper = styled.div`
  font-size:50px;
  color:red;
`

const TitleWrapper = styled.h2`
  text-decoration:underline;
`

export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <TitleWrapper>我是Home標(biāo)題</TitleWrapper>
        <h3>我是Home內(nèi)容</h3>
      </HomeWrapper>
    )
  }
}

實(shí)際效果圖

image.png

2.4 需要安裝一個(gè) vscode-styled-components 插件 會(huì)有高亮提示

2.5 類樣式的添加

image.png

2.6 偽類和嵌套

image.png

3.0 樣式分離的寫法

3.1 在當(dāng)前目錄新建一個(gè)style.js文件

import styled from "styled-components";

export const HomeWrapper = styled.div`
  font-size: 50px;
  color: red;
  /* 樣式嵌套 */
  .banner {
    font-size: 33px;
    background-color: pink;
    span {
      color: #fff;
      &.active {
        color: red;
      }
      &:hover {
        color: green;
      }
      &::after {
        content: "aaaaa";
      }
    }
  }
`;

export const TitleWrapper = styled.h2`
  text-decoration: underline;
`;

3.2 在home.js文件中引入

import React, { PureComponent } from "react";
import {HomeWrapper,TitleWrapper} from "./style"

export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <TitleWrapper>我是Home標(biāo)題</TitleWrapper>
        <h3>我是Home內(nèi)容</h3>
        <div className="banner">
          我是樣式嵌套 <br/>
          <span>測速1</span>
          <span>測速2</span>
          <span>測速3</span>
          <span>測速4</span>
        </div>
      </HomeWrapper>
    );
  }
}

效果同上截圖一樣了

3.3 樣式的屬性有兩種寫法

第一種是直接在組件上加屬性就行了,因?yàn)樗写┩腹δ?/h4>

image.png

第二種是加上attrs函數(shù)來寫

image.png

3.4 以上截圖的代碼

import React, { PureComponent } from "react";
import styled from "styled-components";
const HYProfileInput = styled.input`
  background-color: lightblue;
`;

const HYInput = styled.input.attrs({
  // 這個(gè)地方是 添加元素屬性的
  placeholder:"請輸入姓名",
  type:"text"
})`
/* 這個(gè)地方是添加元素的樣式的 */
  background-color: lightblue;
`;

export default class Profile extends PureComponent {
  render() {
    return (
      <div>
        <hr/>
        {/* 1. */}
        <HYProfileInput placeholder="請輸入內(nèi)容"></HYProfileInput>

        {/* 2. */}
        <HYInput></HYInput>
        <h1>我是Profile標(biāo)題</h1>
        <h3>我是Profile內(nèi)容</h3>
      </div>
    );
  }
}

4. 獲取attrs和state里面的數(shù)據(jù)的寫法

import React, { PureComponent } from "react";
import styled from "styled-components";

// 3.
const AInput = styled.input.attrs({
  placeholder:"請輸入姓名",
  type:"text",
  BColor: "red"
})`
  background-color: lightblue;
  border-color: ${props=>props.BColor};
  /* 這樣就可以獲取到state中的數(shù)據(jù)了 */
  color: ${props=>props.color};
`;

export default class Profile extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      color:"yellow"
    }
  }
  render() {
    return (
      <div>
        <hr/>
     
        {/* 3.獲取attrs 和 state里面的數(shù)據(jù) */}
        {/* 如果想獲取state里面的數(shù)據(jù)的話 需要類似傳值的寫法就可以了 */}
        <AInput  color={this.state.color}></AInput>
        <h1>我是Profile標(biāo)題</h1>
        <h3>我是Profile內(nèi)容</h3>
      </div>
    );
  }
}

實(shí)際截圖

image.png