React 中的CSS

一.内联样式的写法(不推荐)

import React, { PureComponent } from "react";

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color:"red"
    }
  }
  render() {
    const pStyle = {
      color:this.state.color,  // 动态获取
      textDecoration:"underline"
    };
    return (
      <div>
        {/* 1.第一种内联样式 */}
        <h2 style={{ fontSize: "50px", backgroundColor: "red" }}>我是标题</h2>
        {/* 2. 第二种内联样式*/}
        <p style={pStyle}>我是一段文字描述</p>
      </div>
    );
  }
}

实际截图:

image.png

二.多组件开发的问题 (不推荐)

多文件开发会引起组件的内的样式层叠掉另外的样式 如果你和其他文件的标签classNames类名取的名字一样的话,那么就会出现层叠

三.CSS_modules的使用

image.png

缺点 需要驼峰 和 不支持动态修改

image.png

四 CSS in js 的写法(styled-components的基本使用)

使用这个玩意的时候 你必须要下载这个包,命令:

yarn add styled-components
or
npm install  styled-components / npm i styled-components

import React, { PureComponent } from 'react';

/**
 * 一般情况是不会直接把CSS写在当前的文件中的,一般都是会抽离出去的
 * 
 * 
 * **/

// 1. 导入 styled-components 的包
import styled from "styled-components"

// 2. styled.div中的 div 是一个函数类型的
// 这个地方是有返回值的,可以接收的
// 这个地方的 styled.div 是一个div 元素的
// 这个地方的 styled.span 是一个span 元素的
const HomeWrapper = styled.div`
  font-size: 50px;
  color: red;
  /* <span>轮播图</span>是 <HomeWrapper/> 的子元素 所以css按照原来的写法写就行了*/
  .banner {
    background-color: skyblue;
    span {
      color: #fff;
      /* 当前的span 标签的className是active的时候 那么他的文本颜色是后红色 */
      &.active {
        color: red;
      }
      &:hover {
        /* 当前的span 标签的伪类是hover的时候(鼠标经过的时候) 那么他的文本颜色是是green */
        color: green;
      }
      /* 需求 我们想在每个元素后面拼接一个aaa,那么可以使用after伪元素 */
      &::after {
        content: "aaa";
      }
    }
    /* .active {
      color: red;
    } */
  }
  `;

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

class Home extends PureComponent {
  render() {
    return (
      // 3. 使用<HomeWrapper></HomeWrapper>
      <HomeWrapper>
        <TitleWrapper>我是Home组件的标题</TitleWrapper>
        <div className="banner">
          <span>轮播图1</span>
          <span className="active">轮播图2</span>
          <span>轮播图3</span>
          <span>轮播图4</span>
        </div>
      </HomeWrapper>
    );
  }
}
export default Home;

image.png image.png

四.classnames添加class库的使用

import React, { PureComponent } from 'react';
/**
 *   1. React在JSX给了我们开发者足够多的灵活性, 你可以像JavaScript代码一样,通过一些逻辑来决定时候添加某些class:
 *   这些都是原生的React添加class 的方法

 *  <h2 className={"foo bar active title"}>我是标题一</h2>

 *  这种写 如果title的后面或者 active的前面不加一个空格的话就会连到一起,这种写不是很方便
 *  <h2 className={"title " + (isActive ? "active" : "")}> 我是标题二 </h2>
 * 
 *  这样的话比较清楚,为什么呢? 这个地方是可以写一个数组的 
 *  <h2 className={["title", (isActive ? "active" : "")].join(" ")}>我是标题三</h2>

 *  2. 这个时候我们就可以借助第三方库:classnames
 *  -- 很明显,这个是一个用于动态添加className的一个库

 *  3. 库的安装命令:
 *  yarn add classname

 * 
 * **/

// 1. 现下载安装 className库 yarn add classname

// 2. 导入 
import classNames from "classname"
class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isActive: true,
      isBar: false
    }
  }
  render() {
    const { isActive, isBar } = this.state;
    const errorClass = "error";
    const warnClass = null; // 这个不会被加进去
    const undiClass = undefined; // 这个不会被加进去
    const zreo = 0; // 这个不会被加进去
    const tenNum = 10 // 数字为真的时候会被加进去
    return (
      <div>
        {/* 这些都是原生的React添加class 的方法 */}

        <h2 className={"foo bar active title"}>我是标题一</h2>
        {/* 这种写 如果title的后面或者 active的前面不加一个空格的话就会连到一起,这种写不是很方便 */}
        <h2 className={"title " + (isActive ? "active" : "")}> 我是标题二 </h2>

        {/* 这样的话比较清楚,为什么呢? 这个地方是可以写一个数组的 */}
        <h2 className={["title", (isActive ? "active" : "")].join(" ")}>我是标题三</h2>

        <hr />

        {/* classnames库添加class 语法使用如下: */}
        <h2 className={"foo bar active title"}>我是标题一</h2>
        <h2 className={classNames("foo", "bar", "active")}>我是标题四</h2>

        {/* 如果有些属性是必须要加的话,你就写在对象的外面,如下:"title" */}
        <h2 className={classNames({ "active": isActive, "bar": isBar }, "title")}>我是标题五</h2>

        {/* 可以跟变量 */}
        {/* <h2 className={classNames("foo", errorClass, warnClass, undiClass, zreo, tenNum, { "active": isActive })}>我是标题六</h2> */}
        <h2 className={classNames(["active", "title"])}>我是标题七</h2>
        <h2 className={classNames(["active", "title", { "active": isActive }])}>我是标题四</h2>
      </div>
    );
  }
}
export default App;