react项目中如何书写css

一:问题:

在 vue 项目中,我们书写css的方式很简单,就是在 .vue文件中写style标签,然后加上scope属性,就可以隔离当前组件的样式,但是在react中,是没有这个东西的,如果直接引入css文件,很可能会导致样式覆盖的问题。

二:常见书写css方法:

1.直接引入css文件

可以创建一个普通的 .css 文件并在组件中导入它。这是最传统和简单的方法。但是这种很容易出现样式覆盖的问题,所以可以加一些特殊的标识之类的做区分:
css文件:

.login-example {color: blue;font-size: 20px;
}

jsx文件:

import React from 'react';
import './styles.css';const MyComponent = () => (<div className="login-example">Hello, world!</div>
);export default MyComponent;

给每个页面加一个特殊的名称,适用于页面不多的情况。

2.行内样式:

在 React 中,也可以使用内联样式:

import React from 'react';const MyComponent = () => (<div style={{ color: 'blue', fontSize: '20px' }}>Hello, world!</div>
);export default MyComponent;

直接书写行内样式,通常只用于一些很简单的样式,或者需要动态计算样式的情况;通篇使用内联样式是不可取的。

3.CSS Modules

CSS Modules 可以将 CSS 作用域限制在单个组件内,避免全局污染。
步骤:

(1). 创建一个 CSS Module 文件,文件名格式为 *.module.css,例如 styles.module.css:

.example {color: blue;font-size: 20px;
}

(2). 在 React 组件中导入这个 CSS Module 文件:

import React from 'react';
import styles from './styles.module.css';const MyComponent = () => (<div className={styles.example}>Hello, world!</div>
);export default MyComponent;

效果如下:
在这里插入图片描述
可以看到,这里的div的class给了哈希值,就避免了全局污染。

4. 第三方插件

也有许多第三方插件可以供我们使用,像 Styled Components,下面是styled components的用法:

import React from 'react';
import styled from 'styled-components';const Example = styled.div`color: blue;font-size: 20px;
`;const MyComponent = () => (<Example>Hello, world!</Example>
);export default MyComponent;

以上就是常用的在react中书写css的方法

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

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

相关文章

【学一点儿前端】单页面点击前进或后退按钮导致的内存泄露问题(history.listen监听器清除)

今天测试分配了一个比较奇怪的问题&#xff0c;在单页面应用中&#xff0c;反复点击“上一步”和“下一步”按钮时&#xff0c;界面表现出逐渐变得卡顿。为分析这一问题&#xff0c;我用Chrome的性能监控工具进行了浏览器性能录制。结果显示&#xff0c;每次点击“上一步”按钮…

Mars3d实现汽车尾气粒子效果从汽车屁股开始发射效果

本身的汽车尾气粒子效果&#xff1a;在汽车模型的中间发射的↓↓↓↓↓↓↓↓↓↓↓ Mars3d实例中是使用transY偏移值实现汽车尾气粒子效果从汽车屁股开始发射效果&#xff1a; // 动态运行车辆的尾气粒子效果 function addDemoGraphic4(graphicLayer) {const fixedRoute new…

三星与SK海力士:以混合键合技术引领3D DRAM革新之路

在高速缓存内存&#xff08;HBM&#xff09;领域持续领跑的三星与SK海力士&#xff0c;正以混合键合技术为突破口&#xff0c;开启3D DRAM技术的新纪元。这一战略转型不仅预示着存储技术的深度革新&#xff0c;更体现了两大半导体巨头在提高集成度、优化性能与成本上的不懈追求…

如何恢复电脑硬盘删除数据?提供一套实用恢复方案

在数字化时代&#xff0c;电脑硬盘中存储的数据对于个人和企业来说都至关重要。然而&#xff0c;有时我们可能会不小心删除了一些重要文件&#xff0c;或者因为某种原因导致数据丢失。这时候&#xff0c;恢复硬盘上被删除的数据就显得尤为重要。本文将为您提供一套实用的电脑硬…

光电数鸡算法《java》

一&#xff1a;需求 题目&#xff1a;一条流水线有工位D1,D2,D3…D20,总共20个工位。 每个工位都装有一个光电计数器&#xff0c;每个工位都为本工位的计数减去前一个工位&#xff08;第一个有数值的工位除外&#xff0c;不计算。&#xff09; 计算规则&#xff1a;比如D1,D2都…

在自托管基础设施上使用 GitOps 部署 MinIO

基于MinIO Weaviate Python GitOps探索的见解&#xff0c;本文探讨了如何增强软件部署流程的自动化。 通过将 GitHub Actions 与 Docker Swarm 集成而产生的协同作用&#xff0c;以自托管基础架构的稳健性为基础&#xff0c;标志着 CI/CD 实践的关键进步。这种方法不仅利用了软…

Go语言开发框架GoFly已集成数据可视化大屏开发功能,让开发者只专注业务开发,本文指导大家如何使用

前言 框架提供数据大屏开发基础&#xff0c;是考虑当前市场软件应用有一大部分是需要把业务数据做出大屏&#xff0c;很多政府项目对大屏需求特别高&#xff0c;还有生产企业项目也对大屏有需求&#xff0c;没有提供基础规范的后台框架&#xff0c;在开发大屏需要很多时间去基…

Mentor Xpedition怎么切换中英文界面

1、Mentor Xpedition的Layout界面&#xff0c;切换中英文的方法如下图&#xff1b; 切换英文设置&#xff0c;设置系统环境变量&#xff1a;MGC_PCB_LANGUAGEEnglish&#xff0c;重新打开软件即可切换成中文界面&#xff1b; 如果想要在切换成中文&#xff0c;把标量值改为Chi…

SegFormer模型

文章目录 SegFormer模型详细讲解SegFormer的架构1. Hierarchical Transformer Encoder2. MLP Decoder SegFormer的优点SegFormer的应用SegFormer的创新点代码部分讲解 SegFormer模型详细讲解 SegFormer是一个用于图像语义分割的深度学习模型&#xff0c;它结合了Transformer架…

万能引用与完美转发

万能引用与完美转发 万能引用完美转发完美转发的应用场景万能引用的一个小点 万能引用 注意&#xff1a;当&&出现在模板中时&#xff0c;不是右值引用&#xff0c;而是叫万能引用。比如下面的T&& t template<typename T> void PerfectForward(T&&a…

民宿在线预订系统

摘要 随着国家的发展&#xff0c;人们也更加重视自己的业余时间。在特定的假期或休闲时间外出度假已逐渐成为这个时代的趋势。在我国&#xff0c;随着经济的发展和城市居民物质生活水平的提高&#xff0c;旅游业也呈现出越来越受欢迎的趋势。同时随着人口的快速流动&#xff0…

jQuery事件和其他方法

&#xff08;2&#xff09;jQuery 事件处理 2.1 事件处理 on() 绑定事件 on() 方法在匹配元素上绑定一个或多个事件的事件处理函数&#xff1b; 语法演示如下&#xff1a; element.on(events,[selector],fn)&#x1f606;温馨提醒&#x1f606;&#xff1a; events&#xff…

Leetcode 522. 最长特殊序列 II (判断子序列 优化)

Leetcode 522. 最长特殊序列 II 暴力枚举 根据特殊序列的定义&#xff0c;枚举出每个 strs[ i ] 的所有子序列&#xff0c;再将这个子序列与strs中的其他串比较判断 使用二进制位运算枚举一个str的所有子序列 使用双指针指向两个串的开头&#xff0c;同时移动判断是否是子序列…

代理网络基础设施 101:增强安全性、速度和可扩展性

编辑代理网络在现代网络架构中发挥着重要作用&#xff0c;充当管理和重新路由数据流的中介。它们处理的数据可以是各种类型&#xff0c;包括搜索查询和潜在的敏感客户信息&#xff0c;这凸显了它们在数据安全方面的作用。 然而&#xff0c;代理的好处不仅限于安全性。它们为用…

类AAAAAAAAAAAA迭代

class A {vector<A>} C 迭代 这个代码在C中是不能编译的&#xff0c;因为它会导致无限的嵌套&#xff0c;因为std::vector<A>会持有A类型的实例&#xff0c;而A类型的实例又会包含一个std::vector<A>&#xff0c;这会无限制地复制和嵌套下去。 如果你想要创…

linux中如何进行yum源的挂载

linux中如何进行yum源的挂载 ​ 1.首先创建目录[rootserver /]# mkdir /rhel92.使用mount命令进行、dev/cdrom/的镜像文件进行挂载[rootserver /]# mount /dev/cdrom /rhel9/ ​ 注意&#xff1a;此时设立的是临时命令。重启后则失效&#xff0c;若想在下次开启后仍然挂载&a…

WPF由文本框输入的内容动态渲染下拉框

在做项目过程中&#xff0c;需要扫码枪扫描快递单号或者手动输入快递单号时&#xff0c;自动检索该单号是哪个快递公司的&#xff0c;下拉框中自动带出该单号的快递公司。当输入的快递单号不存在时&#xff0c;将数据库中所有快递公司都带出 效果&#xff1a; 通过输入的快递单…

人工智能与生物信息组学 || 2. 非编码 RNA 与疾病关联分析 || 2.2 非编码 miRNA 与疾病关联关系预测

非编码 miRNA 与疾病关联关系预测 越来越多的研究表明&#xff0c;一个复杂疾病通常经由多个 miRNA 协同调控&#xff0c;一个 miRNA 通常参与多个疾病的发生发展过程。因此&#xff0c;预测 miRNA 与疾病的关联关系成为一个当前的研究热点。下面我们将探讨一种 miRNA 和疾病关…

技术驱动会展:展位导航系统的架构与实现

随着会展行业的快速发展&#xff0c;大型会展中心面临着如何提升参展者体验、提高招商效率的挑战。针对客户反馈的展馆面积大、展位查找困难等问题&#xff0c;维小帮提出一套智慧会展导航解决方案&#xff0c;旨在通过先进的室内导航技术提升会展中心的运营效率和参展者的满意…

How to atomically update a maximum value?

c - How to atomically update a maximum value? - Stack Overflow