react 6种方式编写样式

在React中,编写样式主要有以下几种方式:

  1. 内联样式:直接在React组件中使用style属性来定义样式。这种方式比较适合定义动态的样式,因为它允许你将JavaScript表达式作为样式的值。

  2. 外部样式表:通过创建外部的CSS文件,并在React组件中引入这些文件来定义样式。这种方式比较适合定义静态的、可复用的样式。

  3. CSS Modules:这是一种将CSS类名局部化的技术,可以有效避免类名冲突的问题。通过创建.module.css文件,并在React组件中引入这个文件,你可以使用模块化的CSS类名来定义样式。

  4. Styled Components:这是一个流行的CSS-in-JS库,允许你以组件化的方式编写CSS。通过创建styled组件,你可以将样式和组件逻辑紧密结合在一起,实现高度可定制化的样式。

  5. Emotion:这是另一个CSS-in-JS库,与Styled Components类似,但提供了更多的灵活性和可扩展性。Emotion支持多种语法,包括对象样式、模板字符串样式和CSS样式表,可以满足不同的编写需求。

  6. Radium:这是一个用于React的内联样式库,提供了更多的功能和便利性。除了支持基本的内联样式外,Radium还支持伪类和媒体查询等高级特性,可以让你更方便地管理样式。

需要注意的是,以上方式并不是互斥的,你可以根据项目的需求和个人的偏好选择适合的方式来编写样式。同时,React社区还在不断发展,可能会有新的样式编写方式出现。

另外,对于大型项目和团队,可能会采用多种样式编写方式相结合的策略,以实现更好的可维护性和可扩展性。例如,可以使用外部样式表来定义全局的、共享的样式,而使用CSS-in-JS库来定义组件级别的、高度定制的样式。

下面详细代码示例

下面我将针对上面提到的6种方式给出详细的代码示例:

  1. 内联样式
function MyComponent() {const myStyle = {color: 'blue',backgroundColor: 'lightgrey',padding: '10px',borderRadius: '5px'};return <div style={myStyle}>This is an inline styled div.</div>;
}
  1. 外部样式表

假设你有一个App.css文件:

/* App.css */
.my-class {color: green;background-color: lightblue;padding: 20px;text-align: center;
}

然后在React组件中引入并使用:

import React from 'react';
import './App.css'; // 引入外部样式表function App() {return <div className="my-class">This div uses external CSS.</div>;
}export default App;
  1. CSS Modules

假设你有一个MyComponent.module.css文件:

/* MyComponent.module.css */
.myStyledDiv {color: purple;background-color: pink;padding: 15px;border: 1px solid black;
}

然后在React组件中引入并使用:

import React from 'react';
import styles from './MyComponent.module.css'; // 引入CSS Modulefunction MyComponent() {return <div className={styles.myStyledDiv}>This div uses CSS Modules.</div>;
}export default MyComponent;
  1. Styled Components

首先,你需要安装styled-components库:

npm install styled-components

然后编写组件:

import React from 'react';
import styled from 'styled-components';const StyledDiv = styled.div`color: orange;background-color: white;padding: 25px;border: 2px dashed black;
`;function MyStyledComponent() {return <StyledDiv>This div uses Styled Components.</StyledDiv>;
}export default MyStyledComponent;
  1. Emotion

首先,你需要安装@emotion/react@emotion/styled库:

npm install @emotion/react @emotion/styled

然后编写组件:

import React from 'react';
import styled from '@emotion/styled';const StyledDiv = styled.div`color: brown;background-color: lightgreen;padding: 10px 20px;border: 1px solid darkgrey;
`;function MyEmotionComponent() {return <StyledDiv>This div uses Emotion.</StyledDiv>;
}export default MyEmotionComponent;
  1. Radium

首先,你需要安装radium库:

npm install radium

然后编写组件:

import React from 'react';
import Radium from 'radium';const MyStyledDiv = Radium(React.createClass({render() {return (<div style={[styles.base,styles.primary]}>This div uses Radium.</div>);}
}));const styles = {base: {color: '#fff',padding: '20px',borderRadius: '4px'},primary: {backgroundColor: '#0074d9'}
};function MyRadiumComponent() {return <MyStyledDiv />;
}export default MyRadiumComponent;

请注意,上面的Radium示例使用了React.createClass,这是React早期的类组件创建方式,现在更推荐使用ES6的类语法或者函数组件与Hooks。不过,为了演示Radium的用法,这里仍然使用了React.createClass。在实际项目中,你应该会使用函数组件或者类组件与Radium结合。

Radium现在可能不是最流行的选择,因为React的生态系统已经发展了很多其他的CSS-in-JS库,并且React自身也在样式方面有所改进。不过,了解Radium仍然有助于理解CSS-in-JS的概念和用法。

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

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

相关文章

计算机Java项目|Springboot+vue 学生心理咨询评估系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…

数据结构入门到入土——ArrayList与顺序表

目录 一&#xff0c;线性表 二&#xff0c;顺序表 1.接口实现 三&#xff0c;ArrayList简介 四&#xff0c;ArrayList使用 1.ArrayList的构造 2.ArrayList常见操作 3.ArrayList的遍历 4.ArrayList的扩容机制 五&#xff0c;ArrayLisit的具体使用 杨辉三角 一&#x…

linux 使用log4cpp记录项目日志

为什么要用log4cpp记录项目日志 在通常情况下&#xff0c;Linux/UNIX 每个程序在开始运行的时刻&#xff0c;都会打开 3 个已经打开的 stream. 分别用来输入&#xff0c;输出&#xff0c;打印错误信息。通常他们会被连接到用户终端。这 3 个句柄的类型为指向 FILE 的指针。可以…

【保研记录】2023年(24届)SE上岸经历

先开个坑&#xff0c;慢慢填~ 个人信息 学校&#xff1a;某双非 专业&#xff1a;软件工程 第四轮学科评估&#xff1a;无&#xff08;对就是没有等级&#xff09; 排名&#xff1a;1/400 竞赛/荣誉&#xff1a;国奖x2&#xff0c;省三好&#xff0c;大英国二&#xff0c;…

视频剪辑方法:一键批量转码,视频转GIF教程详解

在数字媒体时代&#xff0c;视频剪辑已经成为一项必备技能。无论是专业人士还是普通用户&#xff0c;都要对视频进行剪辑、转码和制作。但是视频剪辑并不简单&#xff0c;要掌握一定的技巧和知识。下面一起来看云炫AI智剪简单易学的视频剪辑方法&#xff1a;一键批量转码和视频…

案例093:基于微信小程序的南宁周边乡村游设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

【MATLAB】【数字信号处理】线性卷积和抽样定理

已知有限长序列&#xff1a;xk1,2,1,1,0,-3, hk[1,-1,1] , 计算离散卷积和ykxk*h(k) 。 程序如下&#xff1a; function [t,x] My_conv(x1,x2,t1,t2,dt) %文件名与函数名对应 %自写的卷积函数 x conv(x1,x2)*dt; t0 t1(1) t2(1); L length(x1) length(x2)-2; t t0:dt…

thinkphp6入门(14)-- 多关联模型查询

背景&#xff1a; 有3个数据表&#xff0c;一个User表&#xff0c;一个Cloth表&#xff0c;一个Shoe表。 Cloth表和Shoe表分别和User表通过user_id关联。 thinkphp 6中如何通过模型查询所有用户&#xff0c;其中包括每个用户的cloth和shoe。 多关联模型查询&#xff1a; 1.…

Flask笔记六之中间件操作

本文首发于公众号&#xff1a;Hunter后端 原文链接&#xff1a;Flask笔记六之中间件操作 与 Django 一样&#xff0c;Flask 也提供了中间件的使用&#xff0c;用于在处理请求之前和之后执行一些公共逻辑 本篇笔记的代码都已经提交到 github 上&#xff0c;可使用下面的操作获取…

Qt6学习笔记:对象树

使用QObject及其子类创建的对象是以对象树的形式来组织的。创建一个QObject对象时若设置一个父对象&#xff0c;它就会被添加到父对象的子对象列表里&#xff0c;一个父对象被删除时&#xff0c;其全部的子对象都会自动删除。QObject类的构造函数里有一个参数用于设置对象的父对…

CommonJS 和 ES6 Module:一场模块规范的对决(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【自学笔记】01Java基础-02java基础语法-02变量、对象与类

1 变量、对象、类 变量&#xff1a; 变量是在编程中用来存储数据的占位符&#xff0c;它具有名称和值。在程序执行过程中&#xff0c;变量的值可以改变。根据作用域和生命周期的不同&#xff0c;变量可分为全局变量、局部变量、类变量&#xff08;静态变量&#xff09;、实例变…

五、书写规则

目录 一、规则举例 三、在规则中使用通配符 四、文件搜寻 五、伪目标 六、多目标 七、静态模式 八、自动生成依赖性 规则包含两个部分&#xff0c;一个是依赖关系&#xff0c;一个是生成目标的方法。 在 Makefile 中&#xff0c;规则的顺序是很重要的&#xff0c;因为&a…

python 数据容器

数据容器概念 一个可以存储多个元素的python数据类型 python有的数据容器 list(列表) tuple(元组) str(字符串) set(集合) dct(字典) 列表 python的列表的数据类型可以是不同的 my_list ["1",123,True,[123,"3333",d,False]]for item in my_list:p…

【uniapp】多规格选择

效果图 VUE <template> <view><view class"wp-80 pd-tb-40 mg-auto"><button type"warn" click"showDrawer(showRight)">筛选</button></view><!-- 筛选-uni-drawer --><uni-drawer ref"s…

Android debug带系统签名

期望是运行直接带系统签名。 gradle 的 android 目录下&#xff1a; signingConfigs {debug {storeFile file("../signAPK/**.jks")storePassword ******keyAlias ******keyPassword ******}release {storeFile file("../signAPK/**.jks")storePassword **…

暗光增强——Zero-DCE网络推理测试

目录 一、Zero-DCE方法1.1 网络优点1.2 网络适用场景1.3 网络不适用场景 二、源码包三、测试四、测试结果五、推理速度六、总结 一、Zero-DCE方法 Zero-DCE&#xff08;Zero-Reference Deep Curve Estimation&#xff09;是一种用于低光照增强的网络。 1.1 网络优点 无需参考…

ClickHouse数据库详解和应用实践

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 概述1.适用场景2.不适用场景 一、核心特性1.完备的DBMS功能2.列式存储与数据压缩 二、安装部署1.在线安装2.离线安装 三、jdbc访问总结 概述 ClickHouse 是一个用于…

你是唯一的 uniq

文章目录 你是唯一的 uniq语法默认无参数统计出现频次仅仅显示重复的行仅仅显示不重复的行更多信息你是唯一的 uniq Linux uniq 命令用于检查及删除文本文件中重复出现的行列,一般与 sort 命令结合使用。 官方定义为: uniq - report or omit repeated lines uniq 可检查文本…

wordpress在界面将站点地址直接修改为https导致上不去问题的解决办法

wordpress在界面将站点地址直接修改为https导致上不去问题的解决办法 #修改数据库yz_options