React _CSS的使用(推荐使用方法)

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.这个style.module.css用法不支持 连接符号比如: setting-item 这种是会报错的

1.4 这个style.module.css用法:不支持动态样式邦定, 最后还是需要内联样式来写

2. Styles-components 的使用

2.1 下载 styles-components库

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

2.2 导入这个库

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标题</TitleWrapper>
        <h3>我是Home内容</h3>
      </HomeWrapper>
    )
  }
}

实际效果图

image.png

2.4 需要安装一个 vscode-styled-components 插件 会有高亮提示

2.5 类样式的添加

image.png

2.6 伪类和嵌套

image.png

3.0 样式分离的写法

3.1 在当前目录新建一个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标题</TitleWrapper>
        <h3>我是Home内容</h3>
        <div className="banner">
          我是样式嵌套 <br/>
          <span>测速1</span>
          <span>测速2</span>
          <span>测速3</span>
          <span>测速4</span>
        </div>
      </HomeWrapper>
    );
  }
}

效果同上截图一样了

3.3 样式的属性有两种写法

第一种是直接在组件上加属性就行了,因为它有穿透功能

image.png

第二种是加上attrs函数来写

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({
  // 这个地方是 添加元素属性的
  placeholder:"请输入姓名",
  type:"text"
})`
/* 这个地方是添加元素的样式的 */
  background-color: lightblue;
`;

export default class Profile extends PureComponent {
  render() {
    return (
      <div>
        <hr/>
        {/* 1. */}
        <HYProfileInput placeholder="请输入内容"></HYProfileInput>

        {/* 2. */}
        <HYInput></HYInput>
        <h1>我是Profile标题</h1>
        <h3>我是Profile内容</h3>
      </div>
    );
  }
}

4. 获取attrs和state里面的数据的写法

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中的数据了 */
  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里面的数据 */}
        {/* 如果想获取state里面的数据的话 需要类似传值的写法就可以了 */}
        <AInput  color={this.state.color}></AInput>
        <h1>我是Profile标题</h1>
        <h3>我是Profile内容</h3>
      </div>
    );
  }
}

实际截图

image.png