React编写CSS方式

1. css modules

css modules并不是React特有的解决方案,而是所有使用了类似于 webpack配置的环境 下都可以使用的。
如果在其他项目中使用它,那么我们需要自己来进行配置,比如 配置webpack.config.js中的modules: true 等。
React的脚手架已经内置了css modules的配置:
  • .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等,就可以直接进行引用;

css modules确实解决了局部作用域的问题,也是很多人喜欢在React中使用的一种方案。

缺陷:

  • 引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的;
  • 所有的 className都必须使用{style.className} 的形式 来编写;
  • 不方便 动态来修改某些样式 ,依然 需要使用内联样式的方式

2. CSS in JS

概念:

  • CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义;
  • 注意此功能并不是 React 的一部分,而是由第三方库提供;
  • CSS-in-JS通过JavaScript来为CSS赋予一些能力,包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修
    改状态等等;
2.1 认识styled-components

npm install styled-components

styled-components的本质是通过函数的调用,最终创建出一个组件:
  • 这个组件会被自动添加上一个不重复的class;
  • styled-components会给该class添加相关的样式;
支持类似于CSS预处理器一样的样式嵌套:
  • 支持直接子代选择器或后代选择器,并且直接编写样式
  • 可以 通过&符号获取当前元素
  • 直接 伪类选择器、伪元素 等;
props、attrs属性:
  • props可以传递
  • props可以被传递给styled组件
  • 添加attrs属性

styles.js

import styled from "styled-components"
import {primaryColor,largeSize
} from "./style/variables"// 1.基本使用
export const AppWrapper = styled.div`.footer {border: 1px solid orange;}
`// const obj = {
//   name: (props) => props.name || "why"
// }// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs(props => ({tColor: props.color || "blue"
}))`border: 1px solid red;.title {font-size: ${props => props.size}px;color: ${props => props.tColor};&:hover {background-color: purple;}}.content {font-size: ${largeSize}px;color: ${primaryColor};}
`

App.jsx

import React, { PureComponent } from 'react'
import Home from './home'
import { AppWrapper, SectionWrapper } from "./style"export class App extends PureComponent {constructor() {super()this.state = {size: 30,color: "yellow"}}render() {const { size } = this.statereturn (<AppWrapper><SectionWrapper size={size}><h2 className='title'>我是标题</h2><p className='content'>我是内容, 哈哈哈</p><button onClick={e => this.setState({color: "skyblue"})}>修改颜色</button></SectionWrapper><Home/><div className='footer'><p>免责声明</p><p>版权声明</p></div></AppWrapper>)}
}export default App

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

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

相关文章

php中使用Imagick转换PDF第一页为PNG图片并且识别出二维码

前言&#xff1a;关于php中如何安转Imagick可见相关教程&#xff0c;在识别二维码用到了这个扩展&#xff1a; khanamiryan/php-qrcode-detector-decoder 需要注意的是目前该扩展已经更新到了2.0.2&#xff0c;默认使用composer安转不指定版本会安装最新版本的扩展&#xff0c;…

【Linux服务端搭建及使用】

连接服务器的软件&#xff1a;mobaxterm 设置root 账号 sudo apt-get install passwd #安装passwd 设置方法 sudo passwd #设置root密码 su root #切换到root账户设置共享文件夹 一、强制删除原有环境 1.删除python rpm -qa|grep pytho…

获取西华大学新闻网站信息(爬虫样例)

利用python的爬虫功能进行信息爬取&#xff0c;关键在于源码分析&#xff0c;代码相对简单。 1 源代码分析 访问网站&#xff0c;按下F12&#xff0c;进行元素查找分析。 2 代码实现 from requests import get from bs4 import BeautifulSoupdef getXhuNews(pageNum1):&qu…

作用域理解

概念:它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的。表示变量 或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境。 ES5的作用域只有两种:全局作用域和局部作用域 全局作用域 var a1; //全局作用域 function fn1(…

【每日一记】OSPF区域划分详讲、划分区域的优点好处

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;小新爱学习. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc…

各大搜索引擎的User-Agent

各大搜索引擎的User-Agent baidu&#xff1a;Mozilla/5.0 (compatible; Baiduspider/2.0; http://www.baidu.com/search/spider.html) Google&#xff1a;Mozilla/5.0 (compatible; Googlebot/2.1; http://www.google.com/bot.html) Sogou&#xff1a;Sogou web spider/4.0(h…

Java语法HashMap集合computeIfAbsent()方法使用

编程中经常遇到这种数据结构&#xff0c;判断一个map中是否存在这个key&#xff0c;如果存在则处理value的数据&#xff0c;如果不存在&#xff0c;则创建一个满足value要求的数据结构放到value中。以前常用的方法如下&#xff1a; import java.util.*;public class TestCompu…

Spring技术原理之Bean生命周期原理解析

Spring技术原理之Bean生命周期原理解析 Spring作为Java领域中的优秀框架&#xff0c;其核心功能之一是依赖注入和生命周期管理。其中&#xff0c;Bean的生命周期管理是Spring框架中一个重要的概念。在本篇文章中&#xff0c;我们将深入探讨Spring技术原理中的Bean生命周期原理…

家政服务行业做开发微信小程序可以实现什么功能

家政服务行业开发微信小程序可以实现多种功能&#xff0c;从而提升服务品质和效率&#xff0c;下面我们来详细介绍一些可能实现的功能。 一、展示服务信息 家政服务微信小程序可以展示各种服务信息&#xff0c;包括各类家政服务项目、价格、服务流程、服务人员信息等。用户可以…

岛屿的数量

题目描述 给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以…

uniapp-vue3 抖音小程序开发(上线项目开源)

最近公司临时接一个项目来接手别人的流量&#xff0c;项目比较小&#xff0c;时间比较赶。 需求&#xff1a;一个答题小程序&#xff0c;通过答题来实现性格测算和分析。 之前开发过支付宝小程序和微信小程序&#xff0c;这次是首次开发抖音小程序&#xff0c;老板要求只能下…

第十三章:IO流

13.1&#xff1a;File类的使用 package com.jiayifeng.java;import org.junit.Test;import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.util.Date;/*** author 爱编程的小贾* create 2023-10-10 16:13** 一&#xff1a;File类的使用…

通过后台系统添加一段div,在div中写一个<style></style>标签来修改div外面的元素的深层元素的样式

先看图 btn元素就是通过后台系统加上的元素,现在需要通过在btn里面写一个style标签来修改grid-nine里面的head元素的高度.开始想通过style来修改,但是不知道怎么去获取这个div外面的元素,想通过js方法去修改,写了script标签加了js代码,但不生效,后面问了才知道,这个项目是vue打…

MES系统安灯管理:实时可视化生产线状态

一、MES系统安灯管理的意义&#xff1a; 安灯管理是指通过使用不同颜色的灯光信号来表示生产线的状态&#xff0c;以便生产人员能够直观地了解生产线的运行情况。MES系统安灯管理的意义在于提供一个实时可视化的工具&#xff0c;使制造企业能够及时发现生产线异常和潜在问题&a…

light client轻节点简介

1. 引言 前序博客&#xff1a; Helios——a16z crypto构建的去中心化以太坊轻节点 去中心化和自我主权对于Web3的未来至关重要&#xff0c;但是这些理想并不总适用于每个项目或应用程序。在非托管钱包和bridges等工具中严格优先考虑安全性而不是便利性的用户&#xff0c;可选…

【安全】容器中二进制漏洞检测方案

1 背景 镜像或者容器中&#xff0c;如果用户是通过包管理软件安装的程序&#xff0c;可以通过包管理软件获取对应的软件信息和版本信息&#xff0c;但是&#xff0c;如果用户自己编译了一个二进制&#xff0c;然后打包到镜像或者通过拷贝命令放到容器中&#xff0c;该如何识别…

设计模式 - 结构型模式考点篇:适配器模式(类适配器、对象适配器、接口适配器)

目录 一、适配器模式 一句话概括结构式模式 1.1、适配器模式概述 1.2、案例 1.2.1、类适配器模式实现案例 1.2.2、对象适配器 1.2.3、接口适配器 1.3、优缺点&#xff08;对象适配器模式&#xff09; 1.4、应用场景 一、适配器模式 一句话概括结构式模式 教你将类和对…

阿里云上了新闻联播

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 阿里新任的CEO吴泳铭上央视新闻联播了! 在昨天的新闻联播里&#xff0c;出席科技座谈会&#xff0c;有一个特别镜头&#xff0c;出现了阿里新任CEO吴泳铭的镜头。 这个信号意义明显&#xff0c;我…

uniapp下拉刷新

为什么要使用uniapp的下拉刷新呢 跨平台兼容性&#xff1a; Uniapp 允许你一次编写代码&#xff0c;然后在多个平台&#xff08;如微信小程序、H5、iOS 和 Android 等&#xff09;上运行。使用 Uniapp 的下拉刷新功能&#xff0c;可以确保在不同平台上都能提供一致的用户体验&a…