在前面的文章当中介绍了一个 styled-compoents 的一个动态修改状态的特性，这个特性就是借助 props 来实现的，如下, 假如我现在有这么一个需求就是点击一个按钮修改一下 p 标签的颜色：
上篇文章介绍了 styled-components 的一些基础用法，这篇文章接着介绍写它的一些高阶组件用法。
单一的视觉不再满足用户体验需求，为提高用户体验，提高应用体验口碑，同时提高开发者效率，我们希望提高组件库的可定制化，因此提供换肤功能以及多种类组件中的样式定制功能，允许用户将应用切换不同主题风格的皮肤，也允许开发者对指定组件进行样式改造。
刚刚发现一个有趣的组件库，官方介绍是为了构建 AIGC 网页应用而生的组件库。这不~就赶紧和大家一起分享！
CSS 是一门标记语言，用于元素布局及样式定义。它存在很多问题，例如书写效率和维护性低；缺乏模块机制、变量、函数等概念；容易出现全局样式污染和样式冲突等。目前前端社区存在很多解决上述问题的方案，主要包括 CSS Module以及 styled-components💅（CSS-in-JS 的代表）。 styled-components 在我的日常开发中用得很多，并且用得非常顺手。它的 CSS-in-JS 思想以及通过 props 来动态更改样式跟 React 的开发理念一脉相承，并且还基于 React Con
除了传统的 CSS，你还可以使用 内联样式 和 CSS-in-JS 作为 React 应用程序的样式选项。
原文链接：5 things you can do in CSS-in-JS that you didn't know about
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。必须注意，提供者永远要在消费者上层，正所谓水往低处流，提供者一定要是消费者的某一层父级。
大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder
在任何复杂应用中，测试是一个至关重要的方面。测试不仅仅是为了提高覆盖率，其主要目的是尽可能地模拟实际使用场景。
浅谈React性能优化的方向 Bobi.ink 2019-06-14 本文来源于公司内部的一次闪电分享，稍作润色分享出来。主要讨论 React 性能优化的主要方向和一些小技巧。如
React Context 是在 React 应用程序中管理全局状态的强大工具。它允许组件共享和访问数据，而无需进行复杂的prop drilling操作。无论您是希望刚开始使用 Context 的初学者，还是希望优化 Context 使用性能的中级开发人员，本文或许都能给您提供一些灵感。
React 源码版本: v16.9.0 源码注释笔记：airingursb/react 如何复用和扩展 React 组件的状态逻辑？具体而言，有以下五种方案： Mixins Class Inheritance Higher-Order Component Render Props React Hooks 下面，我们一一介绍五种方案的实现。 1. Mixins Mixins 混合，其将一个对象的属性拷贝到另一个对象上面去，其实就是对象的融合，它的出现主要就是为了解决代码复用问题。 扩展：说到对象融合，
静电说：在本文中，我们将使用Figma来创建一个可以一键切换亮色模式和暗色模式设计的系统，非常简单快捷。同时，我们也可以在本文中学习到亮色模式和暗色模式在设计过程中的区别。本文来自Pixsellz。
像 react-redux、mobx-react、react-router 都使用了旧 Context api，可谓 context 无处不在。
前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的，看了下官网，发现这个东西还是蛮有意思的。号称 无需打包工具（Webpack，Parcel）便能将代码结果实时展现在浏览器中。可以先看以下的图，是不是很诱人？
Webpack 5 Module Federation: A game-changer in JavaScript architecture
大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。
自己也没想到这个系列可以到第六篇，断更确实很久了，居然还收到了小伙伴的催更，感谢你们的不离不弃。闲话少说，我们这次要介绍的是 Compose 主题，那么 Compose 主题 Theme 到底有什么？用 Compose 实现换肤简单吗？一起来看看吧！
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
前言 人生是个积累的过程，你总会有摔倒，即使跌倒了，你也要懂得抓一把沙子在手里。—— 丁磊 码过的每一个需求、踩过的每一个坑、修过的每一个 bug 、学过的每一个知识以及看过的每一篇文章都不会成为无
1. react 使用createContext、useContext设置主题色 import React, { useState } from 'react'; interface IThemeProps { [key: string]: { color: string; background: string; } } // 主题色 const themes: IThemeProps = { 'light': { color: '#000', backgro
我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。
静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。在这里静电结合WWDC 2019的官方视频与苹果官方资料，花了一整天的时间翻译整理，为大家带来最全面细致的iOS 13交互设计指南及规范解析。赶紧转发收藏吧！
后面的模板是我们做后台管理系统经常所需要的东西。 虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。
字体样式回忆上次内容上次了解了一个新的转义模式 \33 逃逸控制字符 escesc 让输出 退出标准输出流 进行控制信息的设置 可以清屏也可以设置光标输出的位置📷还能做什么呢？ 可以设置字符的颜色吗？？？🤔查看细节回忆 控制序列 前导符\033[\是转义字符 要和 后面的内容 一起 构成转义序列\033 是转义序列 转义转义 转化含义转义序列\033对应的 字符含义 是Escape再次 逃逸 出去字符串 里面出现了 Escape后 能逃去到哪里呢？从 输出的字符串 中 Escape 出去 后面的内容 不是纯
小程序搭建的时候如果只使用组件的默认样式，搭建出来的程序样式比较呆板，好听一点的词就是比较素。在没有设计师参与的情况下，我们怎么能美化一下样式呢？学习的方法是借鉴官方的模板，我们将官方的模板拆分出知识点，细节学会了日后自己搭建小程序的时候也就有了思路。
Theme组件可以为material APP定义主题数据（ThemeData）。Material组件库里很多组件都使用了主题数据， 如导航栏颜色、标题字体、Icon样式等。Theme内会使用InheritedWidget来为其子树共享样式数据。
Module Federation [ˌfedəˈreɪʃn] 使 JavaScript 应用得以在客户端或服务器上动态运行另一个 bundle 或者 build 的代码。
后台的模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。
CSS 是前端开发的重要组成部分，但是它并不完美，本文主要探讨 React 样式管理方面的一些解决方案，目的是实现样式的高度可定制化, 让大型项目的样式代码更容易维护.
你是否厌倦了每次打开浏览器都看到同样的新标签页？你是否想要让你的新标签页更有个性，更有趣，更有用？如果是的话，那么你一定要试试 WeTab！
静电说：今天特别为小伙伴们准备了这篇有知识点有实例操作的Widget终极设计指南，干货真的很多，千万不要错过。
最近一段时间，Vue3带来的新能力composition-api带来了比较大的轰动，虽然是灵感是源React Hook，但是在很多方面却超越了它。但是除了composition-api，其他的改动却比较少有人讨论，本篇文章就由vuejs/rfcs 这个仓库来看看其他比较让人振奋的RFC。
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，我们开源了 ArcoDesign 设计系统。旨在让社区听见更多的声音，为更多中小型企业及个人设计师和开发者提效，创造更多高效美观的“最佳实践”。
本教程非常适合那些想要扩展技能并为他们的网站添加一项备受追捧的新功能的人。准备好尝试暗黑模式了吗？让我们开始吧！
import time for i in range(100): csi = "\033[" color = str(i % 3) print(csi + color + "moeasy") time.sleep(0.2)
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反，它通过CSS 媒体查询来检测用户的系统设置，并使用两个自定义CSS属性来确定一个基本的配色方案。
styled-components 使用模版字符串特性，让我们可以保持原有 CSS 的书写习惯来编写 CSS，同时，利用 ${ props => props.theme.xxx } 的方式，实现皮肤系统中挖空填值的能力。
Sketch Mac版是一款非常优秀的矢量绘图工具，拥有简约的设计，调色板，面板，菜单，窗口，控件和功能强大的矢量绘图和文字工具；包含针对UI设计的操作和交互模式，让你设计图标、移动手机UI、网站UI等更加简单高效。
Playground macOS是一个模拟 macOS 桌面样式的个人简介展示页。它使用了React、Redux及tailwindcss开发，支持暗模式和亮模式。
还在用 WordPress 的时候，总是喜新厌旧，经常换主题。且装了一堆插件，速度慢还容易崩。 而迁移到 Hexo 之后（小水管服务器太慢，拿去挂 MC 了。根本原因是没钱），光是 hexo-theme-next 的配置项，便让我花了好一番功夫。 导致觉得自己不一直用下去，感到十分对不起仔细一个一个配置过来的自己。
最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。
在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
