react【四】css

最新推荐文章于 2024-09-27 15:55:31 发布

KIKIo_

最新推荐文章于 2024-09-27 15:55:31 发布

阅读量977

点赞数 4

分类专栏： react 文章标签： react.js css 前端

本文链接：https://blog.csdn.net/weixin_46738453/article/details/136090828

版权

react 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

文章目录

1、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 }]]
    }
};

- 下载装饰器 npm i @babel/plugin-proposal-decorators -S
2、修改package.json文件

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

报错可能是版本问题更新一下版本 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.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;

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;
    }
  }
`;