react【四】css

文章目录

  • 1、css
    • 1.1 react和vue css的对比
    • 1.2 内联样式
    • 1.3 普通的css
    • 1.4 css modules
    • 1.5 在react中使用less
    • 1.6 CSS in JS
      • 1.6.1 模板字符串的基本使用
      • 1.6.2 styled-components的基本使用
      • 1.6.3 接受传参
      • 1.6.4 使用变量
      • 1.6.5 继承样式 避免代码冗余
      • 1.6.6 设置主题色
    • 1.7 React中添加class

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作为参数 也可设置默认值attrsexport const SectionWrapper = styled.div.attrs((props) => ({// 默认用传进来的参数 没有的话就使用20textSize: 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.6.5 继承样式 避免代码冗余

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

1.6.6 设置主题色

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

1.7 React中添加class

  • cnpm install classnames
  • 在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正月初五迎财神

大家好&#xff0c;我是小悟 正月初五&#xff0c;人们在这一天迎接财神&#xff0c;祈求财运亨通、事业顺利。按照习俗&#xff0c;家家户户都会燃放鞭炮、点灯笼、摆设祭品&#xff0c;以示虔诚。 早晨&#xff0c;太阳刚刚升起&#xff0c;大家便早早起床&#xff0c;开始准…

【数据存储+多任务爬虫】

数据存储 peewee模块 第三方模块&#xff0c;也需要在cmd中安装。 from peewee import *db MySQLDatabase("spider",host"127.0.0.1",port3306,userroot,password123456 )# 类》表 class Person(Model):name CharField(max_length20) # 类型/约束bi…

核心篇-OSPF技术之序(中)

文章目录 一. 实验专题1.1. 实验1&#xff1a;配置多区域OSPF1.1.1. 实验目的1.1.2. 实验拓扑1.1.3. 实验步骤&#xff08;1&#xff09;配置地址&#xff08;2&#xff09;运行OSPF 1.1.4. 实验调试&#xff08;1&#xff09;查看路由器信息&#xff08;2&#xff09;创建环回…

Spring Boot 笔记 010 创建接口_更新用户头像

1.1.1 usercontroller中添加updateAvatar&#xff0c;校验是否为url PatchMapping("updateAvatar")public Result updateAvatar(RequestParam URL String avatarUrl) {userService.updateAvatar(avatarUrl);return Result.success();} 1.1.2 userservice //更新头像…

【UDS】搞懂时间参数

文章目录 背景时间参数的定义应用层相关会话层相关传输层相关网络层相关实际案例分析背景 TBD. 时间参数的定义 注意,这些时间参数都是超时阈值,需要理解为什么要有这些阈值,在哪一端判断这些阈值的,无需“死记硬背”它们的含义。 应用层相关 【P2 Client】 P2 Client 的…

滑模控制器是用来干什么的,生活中的应用案例有哪些,滑模控制器中的滑模是什么意思,来源是什么?

问题描述&#xff1a;滑模控制器是用来干什么的&#xff0c;生活中的应用案例有哪些&#xff0c;滑模控制器中的滑模是什么意思&#xff0c;来源是什么&#xff1f; 问题解答&#xff1a; 滑模控制器&#xff08;Sliding Mode Controller&#xff09;是一种用于控制系统的控制…

数学建模:K-means聚类手肘法确定k值(含python实现)

原理 当K-means聚类的k值不被指定时&#xff0c;可以通过手肘法来估计聚类数量。   在聚类的过程中&#xff0c;随着聚类数的增大&#xff0c;样本划分会变得更加精细&#xff0c;每个类别的聚合程度更高&#xff0c;那么误差平方和&#xff08;SSE&#xff09;会逐渐变小&am…

YOLOv8改进 | Conv篇 | 利用FasterBlock二次创新C2f提出一种全新的结构(全网独家首发,参数量下降70W)

一、本文介绍 本文给大家带来的改进机制是利用FasterNet的FasterBlock改进特征提取网络,将其用来改进ResNet网络,其旨在提高计算速度而不牺牲准确性,特别是在视觉任务中。它通过一种称为部分卷积(PConv)的新技术来减少冗余计算和内存访问。这种方法使得FasterNet在多种设…

LeetCode、72. 编辑距离【中等,二维DP】

文章目录 前言LeetCode、72. 编辑距离【中等&#xff0c;二维DP】题目链接与分类二维DP 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。 涵盖技术内容…

nvm 安装nodejs教程【详细】

目录 一、安装nvm 二、配置镜像 三、安装nodejs 安装 查看正在用的nodejs版本 切换版本 一、安装nvm 双击安装包&#xff1a; 无脑下一步即可&#xff0c;当然你可以自定义你自己的安装目录。 安装完后&#xff0c;打开环境变量&#xff0c;你会发现nvm为我们自动配置好…

TinUI v5预发布记录

TinUI v5预发布记录 前言新控件滚动选择框菜单按钮 新样式pre1pre2pre3 新功能导入字体文件 前言 TinUI是一个从2021年正式开始并一直维护到现在的小项目&#xff0c;中间经过了四代版本的更新。因为一些原因&#xff0c;2023年&#xff0c;TinUI-4后更新较少。 TinUI发展历程…

【Linux】Kali Linux 系统安装详细教程(虚拟机)

目录 1.1 Kali linux简介 1.2 Kali Linux工具 1.3 VMware workstation和ESXi的区别 二、安装步骤 一、Kali概述 1.1 Kali linux简介 Kali Linux是基于Debian的Linux发行版&#xff0c; 设计用于数字取证操作系统。每一季度更新一次。由Offensive Security Ltd维护和资助。最…

使用一根网线,让Ubuntu和正点原子I.MX6ULL开发板互相ping通

1.硬件准备 准备一根网线即可 2. 让windows和I.MX6ULLping通 2.1 找根网线将I.MX6ULL和电脑连起来 2.2 让I.MX6ULL通电运行起来&#xff0c;我这里使用的是正点原子版本的内核、 2.3 进入电脑的网络连接后&#xff0c;按照如下步骤操作 2.4 将ip地址、子网掩码、默认网关…

AtCoder Beginner Contest 338(A~E补题)

文章目录 ABC题D题E题 A 签到 #include <bits/stdc.h> #define rep(i,a,b) for(int i (a); i < (b); i) #define fep(i,a,b) for(int i (a); i > (b); --i) #define ls p<<1 #define rs p<<1|1 #define PII pair<int, int> #define ll long…

【C++初阶】第三站:类和对象(中) -- 类的6个默认成员函数

目录 前言 类的6个默认成员函数 构造函数 概念 特性 析构函数 概念 特性 拷贝构造函数 概念 特征 赋值运算符重载 运算符重载 赋值运算符重载 const成员 const修饰类成员函数 取地址及const取地址操作符重载 本章总结&#xff1a; 前言 有时候我们写好了一个栈&#xff0c;头脑…

ES实战-相关性搜索

ES打分机制 1.TF-IDF 词频-逆文档频率 2.Okapi BM25 3.随机性分歧- DFR相似度 4.基于信息 - IB相似度 5.LM Dirichlet 相似度 6.LM Jelinek Mercer相似度 解释一个查询的结果集 curl -XPOST localhost:9200/get-together/_search?pretty -H Content-Type: application/json -…

FPGA转行ISP的探索之一:行业概览

ISP的行业位置 最近看到一个分析&#xff0c;说FPGA的从业者将来转向ISP&#xff08;Image Signal Process图像信号处理&#xff09;是个不错的选择&#xff0c;可以适应智能汽车、AI等领域。故而我查了一下ISP&#xff0c;对它大致有个概念。 传统的ISP对应的是相机公司&…

Python爬虫:安全与会话管理

源码分享 ​​https://docs.qq.com/sheet/DUHNQdlRUVUp5Vll2?tabBB08J2​​ 在进行网站数据抓取时&#xff0c;会话管理是保持与目标网站通信连续性的一种机制。这对于模拟登录、保持用户状态、维护cookie等场景至关重要。同时&#xff0c;安全性也是我们不可忽视的一个方面…

使用python绘制可视化的欧拉公式三维曲线图

欧拉公式应用非常广泛&#xff0c;它在研究交流电、信号分析、量子力学、极坐标切换、求反常积分以及研究任何圆周运动等方面都有着重要的应用&#xff0c;它建立了复数、自然对数、圆周率等重要数学常量之间的关系&#xff0c;描述了复数在极坐标和笛卡尔坐标之间的转换。公式…

windows@命令行映射磁盘驱动器若干方法@开机自动映射网络磁盘

文章目录 windows映射网络磁盘驱动器资源管理器中GUI方式创建命令行方式创建命令行列出驱动器列表删除取消映射持久化配置映射&#x1f47a;记住凭证 FAQ开机自启登录系统后自动挂载&#x1f47a;[以alist webdav 挂载为例]分析对策延迟挂载&#x1f47a;Note 访问已经挂载网络…