CSS-IN-JS

CSS-IN-JS

为什么会有CSS-IN-JS

CSS-IN-JS是web项目中将CSS代码捆绑在JavaScript代码中的解决方案。

这种方案旨在解决CSS的局限性,例如缺乏动态功能,作用域和可移植性。

CSS-IN-JS介绍
1:CSS-IN-JS方案的优点:
  • 让css代码拥有独立的作用域,阻止CSS代码泄露到组件外部,防止样式冲突
  • 让组件更具可移植性,实现开箱即用,轻松创建松耦合的应用程序
  • 让组件更具可重用性,只需编写一次即可,可以在任何地方运行。不仅可以在同一应用程序中重用组件,而且可以在使用相同框架构建的其他应用程序中重用组件。
  • 让样式具有动态功能,可以将复杂的逻辑应用于样式规则,如果要创建需要动态功能的复杂UI,它是理想的解决方案。
2:CSS-IN-JS方案的缺点:
  • 为项目增加了额外的复杂性。
  • 自动生成的选择器大大降低了代码的可读性
Emotion库

CSS-IN-JS是一种css的解决方案,而Emotion库则是具体的工具库。

1:Emotion库介绍:

Emotion是一个旨在使用JaveScript编写CSS样式的库

npm install @emotion/core @emotion/styled

2:css属性支持
jsx Pragma

通知babel,不需要将jsx语法转换为React.createElement方法,而是转换为emotion的jsx方法

在组件使用导入jsx

import { jsx } from '@emotion/core'
Babel Preset

在package.json文件中找到babel属性,加入如下内容

"@emotion/babel-preset-css-prop"

效果如下:

在这里插入图片描述

3:css方法
string styles
const style = css`
width:100px;
height:100px;
background:'green'
`

在这里插入图片描述

object styles
const style =css({
width:200,
height:200,
background:'yellow'
})

在这里插入图片描述

4:css属性优先级

props对象中的css属性优先级高于组件内部的css属性,在调用组件时可以在=覆盖组件默认样式。

5:styled Components样式化组件

样式化组件就是用来构建用户界面的,是emotion库提供的另一种 为元素添加样式的方式

创建样式化组件
import styled from '@emotion/styled'
// 字符串形式
const Button = styled.button`
color:red
`;
// 对象形式
const Button = styled.buttom({color:red
})

在这里插入图片描述

根据props属性覆盖样式
// 字符串形式
const Button = sytled.button`
width:${props => props.width||100px}
`

在这里插入图片描述

// 对象形式
const Button = sytled.button(props =>{
width:props.width||100
})
// 或者如下
const Button = sytled.button({// 这里是默认width:10
},props =>({// 这里是props传进来的,这样就不用写判断了
width:100
}))

在这里插入图片描述

为任何组件添加样式
const Demo = ({className}) => <div className={className}>Demo</div>
const Fancy = styled(Demo)`
color:red;
`
// 或
const Fancy = styled(Demo)({color:red
})

在这里插入图片描述

通过父组件设置子组件的样式

子组件单独调用color为red,父组件调用时Child的color为green

// 字符串形式
const Child = styled.div`
color:red
`
const parent = sytled.div`
${Child}:{
color:'green'
}
`// 对象形式
const Child = styled.div({color:'red'
})
const parent = sytled.div({[Child] {color:'green'}
})

在这里插入图片描述

嵌套选择器 &

通过&进行关联,& 表示组件本身

const Container = styled.div`
color:red;
& > a {
color:pink;
}
`

在这里插入图片描述

as 属性

要使用组件中的样式,但要更改呈现的元素,可以使用as属性

const Button = styled.button`color:red;
`
<Button as='a' href='#'>button</Button>

在这里插入图片描述

6:样式组合

在样式组合中,后调用的样式优先级高于先调用的样式

const base = css`color:yellow;
`
const danger = css`color:red;
`
<button css={[base,danger]}>button</button>

在这里插入图片描述

7:全局样式
import { css,Global } from '@emotion/core'
const globalStyles = css`body {margin:0;background:red;}
`
function App(){return <><Global styles ={globalStyles} />app</>
}

在这里插入图片描述

8:动画

使用emotion提供的 keyframs

import { css, keyframes} from '@emotion/react'
import React from 'react'const move = keyframes`0%{background:red;left:0;top:0;}100% {background:tomato;left:600px;top:300px;}
`
const boxCss = css`width:100px;height:100px;position:absolute;animation: ${move} 2s ease infinite alternate;
`function App(){return <div// @ts-ignorecss = {boxCss}>app</div>
}

在这里插入图片描述

9:主题

下载主题模块

npm install emotion-theming
import { ThemeProvider } from 'emotion-theming'
// 存储主题样式
const theme = {colors:{primary:'hotpink'}
}
<ThemeProvider theme={theme}></ThemeProvider>
// 获取主题内容
const getPrimaryColor = props => css`color:${props.colors.primary}
`
<div css={getPrimaryColor}></div>// 第二种方式
import { useTheme } from 'emotion-theming'
function Demo(){const theme = useTheme();
}
}

}


```typescript
// 获取主题内容
const getPrimaryColor = props => css`color:${props.colors.primary}
`
<div css={getPrimaryColor}></div>// 第二种方式
import { useTheme } from 'emotion-theming'
function Demo(){const theme = useTheme();
}

在这里插入图片描述

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

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

相关文章

深入探索 MySQL 8 中的 JSON 类型:功能与应用

随着 NoSQL 数据库的兴起&#xff0c;JSON 作为一种轻量级的数据交换格式受到了广泛的关注。为了满足现代应用程序的需求&#xff0c;MySQL 8引入了原生的 JSON 数据类型&#xff0c;提供了一系列强大的 JSON 函数来处理和查询 JSON 数据。本文将深入探讨 MySQL 8 中JSON 类型的…

Java与SpringBoot:实现高效车险理赔信息管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

ArcGIS学习(三)数据可视化

ArcGIS学习(三)数据可视化 1.矢量数据可视化 需要提前说明的是,在ArcGIS中,所有的可视化选项设置都是在“图层属性”对话框里面的“符号系统”中实现的。 对于矢量数据的可视化,主要有四种可视化方式: 按“要素”可视化按“类别”可视化按“数量”可视化按“图表”可视…

【Elasticsearch】从入门到精通

目前java常见的针对大数据存储的方案并不多&#xff0c;常见的就是mysql的分库分表、es存储 这里偏向es存储方案&#xff0c;es不同的版本之间其实差异还挺大的&#xff0c;本篇博文版本Elasticsearch 7.14.0 Springboot整合Easy-Es Easy-Es官方文档 Elasticsearch的初步认识 …

TypeScript:将arraybuffer类型数据转换为json

通过axios发送http请求时&#xff0c;如果设置了 const httpArgs { method: GET, url:/url/xxx, params:{}, headers:{Content-type:application/octet-stream}, responseType:arraybuffer } 那么响应数据将被保存在arraybuffer类型的数组中&#xff0c;可以通过如下方式将其…

机器翻译后的美赛论文怎么润色

美赛论文的语言表达一直是组委会看重的点&#xff0c;清晰的思路和地道的语言在评审中是重要的加分项。 今天我们就来讲讲美赛论文的语言问题。 我相信有相当一部分队伍在打美赛的时候&#xff0c;出于效率的考量&#xff0c;都会选择先写中文论文&#xff0c;再机翻成英文。 …

Python基础学习 -07 运算符

Python 运算符 运算符用于对变量和值执行操作。 Python 在以下组中划分运算符&#xff1a; 算术运算符赋值运算符比较运算符逻辑运算符身份运算符成员运算符位运算符 Python 算术运算符 算术运算符与数值一起使用来执行常见的数学运算&#xff1a; 运算符名称实例加x y-…

【蓝桥杯冲冲冲】[NOIP2003 普及组] 栈

蓝桥杯备赛 | 洛谷做题打卡day27 文章目录 蓝桥杯备赛 | 洛谷做题打卡day27题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示题解代码我的一些话 [NOIP2003 普及组] 栈 题目背景 栈是计算机中经典的数据结构&#xff0c;简单的说&#xff0c;栈就是限制在一…

Linux校准时间 Centos

Linux校准时间 Centos 首先&#xff0c;确保系统中已经安装了tzdata包。如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; sudo yum install tzdata设置系统时区为上海&#xff1a; sudo timedatectl set-timezone Asia/Shanghai验证时区设置是否生效&#xff1a;…

图解支付-金融级密钥管理系统:构建支付系统的安全基石

经常在网上看到某某公司几千万的个人敏感信息被泄露&#xff0c;这要是放在持牌的支付公司&#xff0c;可能就是一个非常大的麻烦&#xff0c;不但会失去用户的信任&#xff0c;而且可能会被吊销牌照。而现实情况是很多公司的技术研发人员并没有足够深的安全架构经验来设计一套…

RK3568平台 设备模型基本框架-kobject 和kset

一.什么是设备模型 字符设备驱动通常适用于相对简单的设备&#xff0c;对于一些更复杂的功能&#xff0c;比如说电源管理和热插拔事件管理&#xff0c;使用字符设备框架可能不够灵活和高效。为了应对更复杂的设备和功能&#xff0c;Linux内核提供了设备模型。设备模型允许开发…

Centos7安装图形界面并使用Win10远程桌面连接

Centos7安装图形界面并使用Win10远程桌面连接 一、关闭防火墙和selinux二、安装Server with GUI三、设置系统默认启动进入GUI界面四、安装epel库和xrdp五、启动xrdp并设置成开机自启六、win10电脑打开连接 一、关闭防火墙和selinux #临时关闭防火墙 [rootse1215 ~]# systemctl…

算法——B/动态规划

一、动态规划基础 什么是DP DP(动态规划)全称Dynamic Programming,是运筹学的一个分支&#xff0c;是一种将复杂问题分解成很多重叠的子问题&#xff0c;并通进子问题的解得到整个问题的解的眼一种算法在动态规划中有一些概念&#xff1a; 状态&#xff1a;就是形如dp[ i ] […

JSON使用示例

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。它基于JavaScript的一个子集&#xff0c;但是JSON是独立于语言的&#xff0c;可以被多种编程语言读取和构建。以下是一…

WordPress从入门到精通【安装部署】

初识WordPress WordPress&#xff0c;简称WP&#xff0c;其简称的由来是取英文单词“word”与“press”的首字母 WP中文官网 1WP主站&#xff08;英文&#xff09; 官方标称&#xff0c;已有43%的网站在使用WordPress WordPress亮点 WP使用PHP语言开发&#xff0c;兼容性极…

python推荐算法在汽车用品商城营销系统 django+flask

本论文拟采用计算机技术设计并开发的汽车营销中的设计与实践 &#xff0c;主要是为用户提供服务。使得会员可以在系统上查看汽车商品、汽车快讯、还可以咨询客服&#xff0c;管理员对信息进行统一管理&#xff0c;与此同时可以筛选出符合的信息&#xff0c;给笔者提供更符合实际…

FFMPEG推流到B站直播

0、参考 ffmpeg安装参考小弟另外的一个博客&#xff1a;FFmpeg和rtsp服务器搭建视频直播流服务-CSDN博客推流参考&#xff1a;用ffmpeg 做24小时推流直播_哔哩哔哩_bilibili 一、获取b站直播码 点击开始直播后&#xff0c;会出现以下的画面 二、ffmpeg进行直播推流 ffmpeg -r…

编程笔记 html5cssjs 078 JavaScript 条件判断语句

编程笔记 html5&css&js 078 JavaScript 条件判断语句 条件判断语句小结 条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。 条件判断语句 在JavaScript中&#xff0c;条件判断语句用于根据特定条件执行不同的代码块。以下是几种主要的条件判断结构&a…

网络规划与部署实训

一 实训目的及意义 本周实训主要是了解网络规划与部署&#xff0c;熟悉三大厂商华为、思科、锐捷交换机路由器以及相关协议的原理和配置&#xff0c;提高学生的动手能力和分析规划部署能力。 实训主要针对计算机网络系统集成的设计与实现的实际训练&#xff0c;着重锻炼学生熟练…

Flutter开发iOS问题记录

一、版本适配问题 warning: The iOS deployment target ‘IPHONEOS_DEPLOYMENT_TARGET’ is set to 10.0, but the range of supported deployment target versions is 12.0 to 17.2.99. (in target ‘Protobuf’ from project ‘Pods’) 可以通过在podfile中配置解决。 pos…