当前位置:   article > 正文

react【四】css

react【四】css

1、css

1.1 react和vue css的对比

在这里插入图片描述

1.2 内联样式

在这里插入图片描述

在这里插入图片描述

1.3 普通的css

在这里插入图片描述

  • 缺点:css文件是全局样式 会影响到其他的同名的样式,进行样式的堆叠

1.4 css modules

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5 在react中使用less

  • 1、在根文件中创建 craco.config.js文件夹
    • 安装carco npm i @craco/craco
    • 设置内容
const CracoLessPlugin = require("craco-less");

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { "@primary-color": "#1DA57A" },
                        javascriptEnabled: true
                    }
                }
            }
        }
    ],
    babel: {
        plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
    }
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
    • 下载装饰器 npm i @babel/plugin-proposal-decorators -S
  • 2、修改package.json文件
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

报错可能是版本问题更新一下版本 npm update

在这里插入图片描述
在这里插入图片描述

1.6 CSS in JS

1.6.1 模板字符串的基本使用

// 1.模板字符串的基本使用
const str = `my name is ${name}, age is ${age}`;
console.log(str);

// 2.标签模板字符串的使用
function foo(...args) {
  console.log(args);
}

foo(name, age); // (2) ['why', 18]

// 这也是一种调用方法
foo``; // [['']]

foo`my name is ${name}, age is ${age}`;

// 得到的结果变量是默认为空
// [['my name is','','age is',''],'why',18]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

1.6.2 styled-components的基本使用

  • npm install styled-components
    下载vscode插件
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

1.6.3 接受传参

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.6.4 使用变量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

import React, { Component } from "react";
import { AppWrapper, SectionWrapper } from "./style";

class App extends Component {
  constructor() {
    super();
    this.state = {
      size: 30,
      color: "yellow",
    };
  }

  render() {
    const { size, color } = this.state;

    return (
      <AppWrapper>
        <div className="footer">我是footer</div>

        <SectionWrapper fontSize={size} color={color}>
          <div className="title">我是标题</div>
          <p className="content">我是内容, 哈哈哈</p>
          <button onClick={(e) => this.setState({ color: "skyblue" })}>
            修改颜色
          </button>
        </SectionWrapper>
      </AppWrapper>
    );
  }
}

export default App;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
import styled from "styled-components";
import * as vars from "./style/variables";

// 1、基本使用
// export const AppWrapper = styled.div``

export const AppWrapper = styled.div`
  /* 使用AppWrapper作为标签 就会继承样式 */
  .footer {
    background-color: black;
  }
`;

// 2、将子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props作为参数 也可设置默认值attrs

export const SectionWrapper = styled.div.attrs((props) => ({
  // 默认用传进来的参数 没有的话就使用20
  textSize: props.fontSize || 20,
  textColor: props.color || vars.primaryColor,
}))`
  /* section不需要写类名 */

  color: ${(props) => props.textColor};
  border: 1px solid ${vars.primaryColor};

  .title {
    /* 上面使用了新的变量来处理fontSize 所以需要使用textSize */
    font-size: ${(props) => props.textSize}px;
    color: red;
  }

  .content {
    &:hover {
      color: yellow;
    }
  }
`;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

1.6.5 继承样式 避免代码冗余

在这里插入图片描述
在这里插入图片描述

1.6.6 设置主题色

在这里插入图片描述
在这里插入图片描述

1.7 React中添加class

  • cnpm install classnames
  • 在这里插入图片描述
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/80850
推荐阅读
相关标签
  

闽ICP备14008679号