React中的CSS——styled-components

一、认识CSS in JS

实际上，官方文档也有提到过CSS in JS这种方案：
https://zh-hans.reactjs.org/docs/faq-styling.html

  • “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；
  • 注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；
    在这里插入图片描述

在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离。

  • 但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。
  • 样式呢？样式也是属于UI的一部分；
  • 事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态；

所以React有被人称之为 All in JS；

当然，这种开发的方式也受到了很多的批评：

  • Stop using CSS in JavaScript for web development
  • https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

二、认识styled-components

批评声音虽然有，但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便：

  • CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等；
  • 依然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点；
  • 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案；

目前比较流行的CSS-in-JS的库有哪些呢？
1. styled-components
2. emotion
3. glamorous

目前可以说styled-components依然是社区最流行的CSS-in-JS库，
所以我们以styled-components的讲解为主：
安装styled-components：

 yarn add styled-components

三、ES6标签模板字符串

ES6中增加了模板字符串的语法，这个对于很多人来说都会使用。 但是模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的JavaScript的函数：
正常情况下，我们都是通过 函数名() 方式来进行调用的，
在这里插入图片描述

其实函数还有另外一种调用方式：
在这里插入图片描述

如果我们在调用的时候插入其他的变量：

  • 模板字符串被拆分了；
  • 第一个元素是数组，是被模块字符串拆分的字符串组合；
  • 后面的元素是一个个模块字符串传入的内容；
    在这里插入图片描述

在styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>const name = 'zep'const age = 18function test (...args) {console.log(args)}test(`my name is ${name}, age is ${age}`)test`my name is ${name}, age is ${age}`
</script>
</body>
</html>

四、styled的基本使用

styled-components的本质是通过函数的调用，最终创建出一个组件：

  • 这个组件会被自动添加上一个不重复的class；
  • styled-components会给该class添加相关的样式；
    在这里插入图片描述

另外，它支持类似于CSS预处理器一样的样式嵌套：

  • 支持直接子代选择器或后代选择器，并且 直接编写样式；
  • 可以通过&符号获取当前元素；
  • 直接伪类选择器、伪元素等；
    在这里插入图片描述

在这里插入图片描述

import React, {PureComponent} from 'react';
import styled from 'styled-components'const HomeWrapper = styled.div`font-size: 30px;color: skyblue;.banner {background-color: darkolivegreen;span {display: flex;flex-wrap: wrap;color: #fff;&.active {color: #f90;}&:hover {color: pink;}&::after {content: 'aaa';}}}
`const TitleWrapper = styled.h2`text-decoration: underline;font-size: 18px;
`class App extends PureComponent {render() {return (<HomeWrapper><TitleWrapper>我是home的标题</TitleWrapper><div className='banner'><span>轮播图1</span><span className='active'>轮播图2</span><span>轮播图3</span><span>轮播图4</span></div></HomeWrapper>);}
}export default App;

在实际项目中的写法：
在这里插入图片描述
在这里插入图片描述

五、styled-components 中的props、attrs属性

  1. props可以穿透

在这里插入图片描述
2. props可以被传递给styled组件

  • 获取props需要通过${}传入一个插值函数，props会作为该函数的参数；
  • 这种方式可以有效的解决动态样式的问题；
  1. 添加attrs属性
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

import React, {PureComponent} from 'react';
import styled from 'styled-components'const HYInput = styled.input.attrs({placeholder: 'zep',bColor: 'red'
})`background-color: lightblue;border-color: ${props => props.bColor};color: ${props => props.color}
`class App extends PureComponent {constructor(props) {super(props);this.state = {color: 'blue'}}render() {return (<div className="profile"><input type="password"/><HYInput type="text" color={this.state.color}/><h2>我是profile的标题</h2><ul className="settings"><li>设置列表1</li><li>设置列表2</li><li>设置列表3</li></ul></div>);}
}export default App;

六、styled高级特性

  1. 支持样式的继承
    在这里插入图片描述

在这里插入图片描述

  1. styled设置主题
    在这里插入图片描述
import React, {PureComponent} from 'react';
import Home from '../home'
import Profile from '../profile'
import styled, {ThemeProvider} from "styled-components";const HYButton = styled.button`padding: 10px 20px;color: red;border-color: red;
`
// 继承样式
const HYPrimaryButton = styled(HYButton)`//padding: 10px 20px;//border-color: red;color: #fff;background-color: green;
`
/*const HYPrimaryButton = styled.button`padding: 10px 20px;border-color: red;color: #fff;background-color: green;
`*/class App extends PureComponent {render() {return (<ThemeProvider id="app" theme={{themeColor: 'yellow', fontSize: '30px'}}><div>app</div><hr /><Home /><hr /><Profile /><HYButton>我是普通的按钮</HYButton><HYPrimaryButton>我是primary的按钮</HYPrimaryButton></ThemeProvider>);}
}export default App;
import styled from "styled-components";
export const HomeWrapper = styled.div`font-size: 30px;color: skyblue;.banner {background-color: darkolivegreen;span {display: flex;flex-wrap: wrap;color: #fff;&.active {color: #f90;}&:hover {color: pink;}&::after {content: 'aaa';}}}
`
export const TitleWrapper = styled.h2`text-decoration: underline;font-size: 18px;color: ${props => props.theme.themeColor};
`

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

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

相关文章

l380废墨收集垫已到使用寿命_湖北雨水收集系统定制

l380废墨收集垫已到使用寿命_湖北雨水收集系统定制

淮北海聚环保设备有限公司为您详细解读jrWVof湖北雨水收集系统定制的相关知识与详情&#xff0c; 1、三格化粪池&#xff0c;可设想为长方形或圆形。各粪池容积计较根据粪水储存时间定&#xff0c;即一般可按2&#xff1a;1&#xff1a;3计较。号池储存20天&#xff0c;2…
阅读更多...
React脚手架学习笔记

React脚手架学习笔记

一、前端工程的复杂化 如果我们只是开发几个小的demo程序&#xff0c;那么永远不需要考虑一些复杂的问题&#xff1a; 比如目录结构如何组织划分&#xff1b;比如如何管理文件之间的相互依赖&#xff1b;比如如何管理第三方模块的依赖&#xff1b;比如项目发布前如何压缩、打包…
阅读更多...
access集团和abm_abm年度盛典，12月份，中国、澳大利亚、新西兰三地同时举办，abm各渠道运营商从全球各地赶来参会！...

access集团和abm_abm年度盛典，12月份，中国、澳大利亚、新西兰三地同时举办，abm各渠道运营商从全球各地赶来参会！...

十二月 &#xff0c;abm的各路年会分别在中国、澳大利亚、新西兰三国同时举办&#xff0c;abm各渠道运营商&#xff0c;从全球各地起来参会&#xff0c;先欣赏下abm全球年度盛典新西兰分会场中国区会场在abm中国区总部杭州举办&#xff0c;这次特别邀请了蔡康永&#xff0c;从上…
阅读更多...
隐藏Android下的虚拟按键

隐藏Android下的虚拟按键

隐藏Android下的虚拟按键 要隐藏Android下的虚拟按键&#xff0c;可通过如下办法操作 [cpp] view plaincopy adb root adb remount adb shell ls -al /system/build.prop (查看文件权限) -rw-r--r-- root root 4237 2015-11-19 04:34 build.prop adb …
阅读更多...
医学影像设备学_2020考研：影像大咖告诉你，学影像，就业好，不求人。

医学影像设备学_2020考研：影像大咖告诉你，学影像，就业好，不求人。

医学学科里&#xff0c;有一门专业&#xff1a;医学影像&#xff0c;一直处于比较尴尬的地位&#xff1a;虽然是诊断医生&#xff0c;有执业医生证及大型设备上岗证&#xff0c;但是在同行眼里却是技师、拍片儿的。但是&#xff0c;最近几年医学影像专业迅速崛起&#xff0c;成…
阅读更多...
React中添加class——借助第三方库classnames

React中添加class——借助第三方库classnames

一、vue中添加class vue中添加class是一件非常简单的事情&#xff1a; 你可以通过传入一个对象&#xff1a; 你也可以传入一个数组&#xff1a; 甚至是对象和数组混合使用&#xff1a; 二、React中添加class React在JSX给了我们开发者足够多的灵活性&#xff0c;你可以…
阅读更多...
聊聊微服务架构

聊聊微服务架构

1. 微服务架构概念解析 2. 构建微服务架构&#xff1a;使用 API Gateway 3. 深入微服务架构的进程间通信 4. 服务发现的可行方案以及实践案例 5. 微服务的事件驱动数据管理 6. 选择微服务部署策略 7. 将单体应用改造为微服务 首先让我们了解为何要将微服务纳入考量。 构建单体应…
阅读更多...
AntDesign组件库的使用

AntDesign组件库的使用

一、AntDesign的介绍 AntDesign &#xff0c;简称 antd 是基于 Ant Design 设计体系的 React UI 组件库&#xff0c;主要用于研发企业级中后台产品。 中后台的产品 属于工具性产品&#xff0c;很多优秀的设计团队通过自身的探索和积累&#xff0c;形成了自己的设计体系。 An…
阅读更多...
socket.io跨域踩坑

socket.io跨域踩坑

一、koa结合socket.io 后端代码&#xff1a; // 引入依赖 const koa require("koa"); // 初始化koa const app new koa(); // 开启 http var server require("http").createServer(app.callback()); // 初始化 socket const io require("socket…
阅读更多...
ios 权限提示语_iOS工作室都在用按键v1.6.1（体验版）

ios 权限提示语_iOS工作室都在用按键v1.6.1（体验版）

按键精灵iOS v1.6.1(体验版)已发布到cydia新增工作室专场还支持VIP自助换绑欢迎下载使用~源地址&#xff1a;http://apt.mobileanjian.comVIP换绑方法如下&#xff1a;1、在按键精灵APP上进入“我的”分页&#xff0c;点击VIP信息&#xff0c;看到“解绑”按钮。点击后&#xf…
阅读更多...
Redux学习（一）——Redux的使用过程

Redux学习（一）——Redux的使用过程

一、为什么需要redux JavaScript开发的应用程序&#xff0c;已经变得越来越复杂了&#xff1a; JavaScript需要管理的状态越来越多&#xff0c;越来越复杂&#xff1b;这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等&#xff0c;也包括一些UI的状态&#x…
阅读更多...
Redux学习（二）——封装connect函数

Redux学习（二）——封装connect函数

一、自定义connect函数 connect.js: import {PureComponent} from "react"; import store from "../store"; export function connect(mapStateToProps, mapDispatchToProps) {return function enhanceHOC(WrappedComponent) {return class extends PureC…
阅读更多...
Redux学习（三）——redux-saga的使用、编写中间件函数、Reducer文件拆分

Redux学习（三）——redux-saga的使用、编写中间件函数、Reducer文件拆分

一、redux-devtools 我们之前讲过&#xff0c;redux可以方便的让我们对状态进行跟踪和调试&#xff0c;那么如何做到呢&#xff1f; redux官网为我们提供了redux-devtools的工具&#xff1b;利用这个工具&#xff0c;我们可以知道每次状态是如何被修改的&#xff0c;修改前后…
阅读更多...
react-router的使用（一）——URL的hash、HTML5的history、Router的基本使用

react-router的使用（一）——URL的hash、HTML5的history、Router的基本使用

一、阶段一&#xff1a;后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. 但是, 一个网站, 这么多页面服务器如何处理呢? 一个页面有自己对应的网址, 也就是URL.URL会发送到服务器, 服务器会通过正…
阅读更多...
react-router的使用（二）——NavLink的使用、Switch的作用、Redirect

react-router的使用（二）——NavLink的使用、Switch的作用、Redirect

一、NavLink的使用 需求&#xff1a;路径选中时&#xff0c;对应的a元素变为红色 这个时候&#xff0c;我们要使用NavLink组件来替代Link组件&#xff1a; activeStyle&#xff1a;活跃时&#xff08;匹配时&#xff09;的样式&#xff1b;activeClassName&#xff1a;活跃时…
阅读更多...
群晖ffmpeg_群晖Video station支持DTS和EAC3

群晖ffmpeg_群晖Video station支持DTS和EAC3

群晖video station这个套件现在经过群晖的打磨&#xff0c;现在还是不错的&#xff0c;支持硬件解码和蓝光等多媒体播放&#xff0c;比起PLEX和EMBY动辄好几百的会员费&#xff0c;这个免费的用起来还真香&#xff0c;但是因为种种小问题需要解决了&#xff0c;才能好用&#x…
阅读更多...
react-router的使用（三）——路由的嵌套

react-router的使用（三）——路由的嵌套

一、路由的嵌套 在开发中&#xff0c;路由之间是存在嵌套关系的。 这里我们假设about页面中有三个页面内容&#xff1a; 企业历史、企业文化和联系我们&#xff1b;点击不同的链接可以跳转到不同的地方&#xff0c;显示不同的内容&#xff1b; 二、手动路由跳转 目前我们实现…
阅读更多...
如何阅读一本书 pdf_《如何阅读一本书》：一本书，四个层次，看阅读小白如何逆袭？...

如何阅读一本书 pdf_《如何阅读一本书》：一本书，四个层次，看阅读小白如何逆袭？...

“读书不是为了雄辩和驳斥&#xff0c;也不是为了轻信和盲从&#xff0c;而是为了思考和权衡。”这是培根的一句名言&#xff0c;我们都曾经被这样的读书警句激励的斗志昂扬&#xff0c;于是立下目标一年或是一个月要读多少本书&#xff0c;结果发现一切是徒劳。你是否曾经斗志…
阅读更多...
React Hooks的使用（一）——useState、useEffect解析

React Hooks的使用（一）——useState、useEffect解析

一、为什么需要Hook? Hook 是 React 16.8 的新增特性&#xff0c;它可以让我们在不编写class的情况下使用state以及其他的React特性&#xff08;比如生命周期&#xff09;。 我们先来思考一下class组件相对于函数式组件有什么优势&#xff1f;比较常见的是下面的优势&#xf…
阅读更多...
React Hooks的使用（二）——useContext、useReducer、useCallback、useMemo解析

React Hooks的使用（二）——useContext、useReducer、useCallback、useMemo解析

一、useContext的使用 在之前的开发中&#xff0c;我们要在组件中使用共享的Context有两种方式&#xff1a; 第一种方式&#xff1a;类组件可以通过 类名.contextType MyContext方式&#xff0c;在类中获取context&#xff1b; 第二种方式&#xff1a;多个Context或者在函数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023