React引入css的几种方式以及应用

1.直接引入css文件

import "./parent.css"

2.引入css模块,定义文件名[组件名.module.css];该方式可避免类名的重复,每个组件都有独立的作用域,避免了全局污染,保证了类名的唯一性

import styles from "./parent1.module.css"
.title{color: red;
}
<h2 className={styles.title} style={{ background:'pink' }}>我是父组件</h2>

3.第三方依赖库styled-components,需要下载第三方依赖库,定义每个组件的样式 

 下载依赖库指令:npm install styled-components -S

import styleComponents from "styled-components"// 自定义样式的组件 注意定义的首字母大写,不然不生效
const StyleP = styleComponents.p`color: green;font-size: 30px;font-weight: bolder;
`
const StyleTitle = styleComponents.h1`color: red
`
<StyleTitle>第三方库引入css demo</StyleTitle>
<StyleP>第三方库引入css demo</StyleP>

4.应用 

(1)传参;在组件标签上绑定参数,通过箭头函数获取并操作参数

const Wrapper = styled.div`width: ${props => props.wrapperWidth};height: ${({wrapperHeight}) =>parseInt(wrapperHeight)/2 + 'px'};background: red;
`
<Wrapper wrapperWidth="200px" wrapperHeight="100px"></Wrapper>

(2)继承;通话styled来继承父组件的样式属性

const ParentItem = styled.div`display: block;color: yellow;text-align: center;line-height: 1.5;font-size: 20px;
`
const Item = styled(ParentItem)`color: blue;font-size: 16px;&:nth-child(2n-1){background: #00ffe4;}
`
<ParentItem style={{color: 'red'}}>姜虎东</ParentItem>
<Item>都到曦</Item>
<Item style={{color: '#fff'}}>郑九元</Item>

(3)操作styled组件的样式属性;可在组件标签上定义属性、也可以通过attrs定义属性

const UserInput = styled.input`display: block;width: 500px;
`
// 通过attr定义属性
const PasswordInput = styled.input.attrs(({ type, placeholder }) => ({ type: type ? type : 'text',placeholder: placeholder || '请输入'}))`display: block;
`
用户名:<UserInput value={this.state.username} type="text" placeholder="请输入用户名"></UserInput>
用户:<PasswordInput value={this.state.username}></PasswordInput>
{/* 在组件标签上定义属性 */}
密码:<PasswordInput value={this.state.password} type="password" placeholder="请输入密码"></PasswordInput>

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

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

相关文章

lv21 QT对话框3

1 内置对话框 标准对话框样式 内置对话框基类 QColorDialog, QErrorMessage QFileDialog QFontDialog QInputDialog QMessageBox QProgressDialogQDialog Class帮助文档 示例&#xff1a;各按钮激发对话框实现基类提供的各效果 第一步&#xff1a;实现组件布局&…

编程笔记 html5cssjs 090 JavaScript 文档对象模型

编程笔记 html5&css&js 090 JavaScript 文档对象模型 一、文档对象模型二、Javascript编程中文档对象的组成DOM 的主要组件&#xff1a;事件&#xff08;Events&#xff09;属性&#xff08;Properties&#xff09;方法&#xff08;Methods&#xff09; 三、编程应用四…

gprMax3.0随机介质建模

此处利用gprMax建立随机介质模型,采用matlab生成随机数组,保存为HDF5文件,此处为全代码,无需修改即可运行。在gprMax输入文件中使用#geometry_objects_read:读入自定义的随机模型 此文参考其他博主的自定义几何形状模块gprMax3.0建模时如何自定义目标的几何形状_#geomet…

為什麼使用海外動態代理IP進行網路爬蟲?

網路爬蟲作為獲取網路數據的重要工具&#xff0c;其重要性不言而喻。但隨著網站反爬策略的日益嚴格&#xff0c;爬蟲任務變得愈發困難&#xff0c;不過海外動態代理IP可以很好地解決這一問題。本文將詳細闡釋動態代理IP在爬蟲中的應用&#xff0c;以及如何使用動態代理IP提升爬…

深入理解ngx_http_proxy_connect_module模块(下)

目录 5. 源码分析5.1 模块的初始化代码5.2 请求入口点函数分析5.2.1 ngx_http_proxy_connect_post_read_handler5.2.2 ngx_http_proxy_connect_handler5.3 域名解析回调5.4 向上游服务器发起连接5.4.1 ngx_http_proxy_connect_process_connect5.4.2 ngx_http_proxy_connect_wri…

欧盟发布关于网络安全、通信网络弹性的综合风险评估报告:具有战略意义的十大网络安全风险场景

在欧盟委员会和欧盟网络安全局 ENISA 的支持下&#xff0c;欧盟成员国近日发布了一份报告&#xff0c;详细介绍了欧洲通信基础设施和网络的网络安全和弹性。 该报告概述了对欧盟具有战略意义的十种风险情景。 1、 擦除器/勒索软件攻击 2、 供应链攻击 3、 攻击托管服务、托…

HarmonyOS—使用数据模型和连接器

Serverless低代码开发平台是一个可视化的平台&#xff0c; 打通了HarmonyOS云侧与端侧能力&#xff0c;能够轻松实现HMS Core、AGC Serverless能力调用。其中&#xff0c;数据模型和连接器是两大主要元素。开发者在使用DevEco Studio的低代码功能进行开发时&#xff0c;可以使用…

Redis有哪些原子命令?

SET key value [NX|XX]&#xff1a;将键key设置为指定的字符串value&#xff0c;如果键不存在&#xff0c;则创建&#xff0c;如果键已经存在&#xff0c;则覆盖原有值。可选参数NX表示仅在键不存在时设置值&#xff0c;XX表示仅在键已存在时设置值。 GETSET key value&#x…

给生成出来的a链接或其他dom节点添加点击事件

onMounted(() > {nextTick(() > {const domNodes document.querySelectorAll(a)console.log(domNodes)domNodes.forEach((item, index) > {item.addEventListener(click, async () > {// 点击文章后进行统计console.log(点击了节点&#xff01;, index)})})}) })q…

npm install的-S和-D的区别

在npm install参数中&#xff0c;-S代表 --save&#xff0c;-D标志--save-dev。 1、-S (--save) 用于将包添加到项目的 dependencies&#xff0c;表示这是在生产环境中运行时所需的依赖。例如&#xff1a;npm install package-name -S&#xff0c;这将把 package-name 添加到 …

express+mysql+vue,从零搭建一个商城管理系统5--用户注册

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、新建user表二、安装bcryptjs、MD5、body-parser三、修改config/db.js四、新建config/bcrypt.js五、新建models文件夹和models/user.js五、index.js引入使用body-parser六、修改routes/user.js七、启动项…

书生·浦语大模型全链路开源体系介绍

背景介绍 随着人工智能技术的迅猛发展&#xff0c;大模型技术已成为当今人工智能领域的热门话题。2022 年 11 月 30 日&#xff0c;美国 OpenAI 公司发布了 ChatGPT 通用型对话系统 并引发了全球 的极大关注&#xff0c;上线仅 60 天月活用户数便超过 1 亿&#xff0c;成为历史…

淘宝问大家植入广告

随着电子商务的迅猛发展&#xff0c;各大电商平台都在努力提升用户体验&#xff0c;打造更加互动和有趣的购物环境。淘宝作为中国最大的电商平台之一&#xff0c;其“问大家”功能作为社区互动的重要一环&#xff0c;不仅为买家提供了提问和分享经验的平台&#xff0c;也成为卖…

【实践总结】文件上传可能导致的DoS

通过CVE-2023-24998了解上传的可能隐患 Apache Commons FileUpload场景 条件1&#xff1a; &#xff08;影响版本&#xff09; <!-- Apache Commons FileUpload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-file…

【小沐学QT】QT学习之OpenGL开发笔记

文章目录 1、简介2、Qt QOpenGLWidget gl函数3、Qt QOpenGLWidget qt函数4、Qt QOpenGLWindow5、Qt glut6、Qt glfw结语 1、简介 Qt提供了与OpenGL实现集成的支持&#xff0c;使开发人员有机会在更传统的用户界面的同时显示硬件加速的3D图形。 Qt有两种主要的UI开发方…

【Azure 架构师学习笔记】-Azure Synapse -- Link for SQL 实时数据加载

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Synapse】系列。 前言 Azure Synapse Link for SQL 可以提供从SQL Server或者Azure SQL中接近实时的数据加载。通过这个技术&#xff0c;使用SQL Server/Azure SQL中的新数据能够几乎实时地传送到Synapse&#xff08;…

音视频数字化(视频的数字化)

前面我们已经聊了音频的数字化【音视频数字化(音频数字化)】,并且介绍了音乐CD的那些事儿【音视频数字化(音乐CD)】。从原理上讲,视频的数字化与音频大致相仿,只是相对复杂。 目录 1、模拟视频 2、视频采集 2、压缩标准 1、模拟视频 在【音视频数字化(数字与模拟…

前端路由与后端路由的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

react useContext 用法

1 创建createContext import React, { useContext, useEffect, useState } from react const GlobalContext React.createContext() 2 GlobalContext 作为提供者 export default function App(){ const [filmList,setfilmList] useState([]); const [info,setinfo] useS…

SQL注入漏洞解析--less-7

我们先看一下第七关 页面显示use outfile意思是利用文件上传来做 outfile是将检索到的数据&#xff0c;保存到服务器的文件内&#xff1a; 格式&#xff1a;select * into outfile "文件地址" 示例&#xff1a; mysql> select * into outfile f:/mysql/test/one f…