BR 技术头条
al www.alloyteam.com / 2019-01-01 20:21 / by @技术头条 / 原作者:@AlloyTeam

Styled Components:让样式也成为组件

为了应对越来越复杂的web应用,组件化应运而生,React、Vue等组件化框架使我们的程序更简单更加可维护。在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流,人们开始考虑使用JS上编写CSS,styled components就是其中一种解决方案。styled components是一个React第三方库,作用是可以将样式写成组件的形式,实现在JS上编写CSS。

赞过的人

@技术头条

发表评论

相关分享

in innei.in / 2024-09-09 23:37

ShadowDOM 中样式隔离和继承

在 Web 组件开发中,Shadow DOM 是实现样式隔离的利器,但它在样式继承方面却带来了一些独特的挑战。本文深入探讨了 Shadow DOM 的样式隔离与继承机制,帮助开发者更好地管理组件的样式和结构。如果你想提升 Web 开发中的组件化技巧,千万不要错过!

无图
in innei.in / 2024-03-13 13:21

NextJS/React 加载远程组件

写过文档的大佬们都知道 MDX 这个东西,对原本的 Markdown 进行了扩展,可以在 Markdown 中直接使用框架组件(React,Vue 等等)。
现在也有很多静态生成的博客使用 MDX 去编写博文,在博文中内嵌了 React 组件,在一些需要交互式的场景中,在传统的 Markdown 只能展示内容,而使用了组件就可以把死的文字变活。
MDX 的原理是在项目构建时,解析 Markdown 抽象语法树,把引入的组件进行了编译,然后嵌入到了文章内部。
而使用 MDX,就必须要引入编译时。而对于 CMS 类型的博客网站,因为内容都是动态生成的,就无法使用 MDX。
那么有没有办法去想一个歪路子去实现呢。

无图
te tech.meituan.com / 2022-08-31 23:14

如何应对开源组件⻛险?软件成分安全分析(SCA)能力的建设与演进

随着 DevSecOps 概念的推广,以及云原生安全概念的快速普及,研发安全和操作环境安全现在已经变成了近几年非常热的词汇。目前,在系统研发的过程中,开源组件引入的比例越来越高,所以在开源软件治理层面安全部门需要投入更多的精力。但由于早期技术债的问题,很多企业内部在整个研发流程中对使用了哪些开源组件、这些开源组件可能存在哪些严重的安全隐患等相关的问题,几乎是没有任何能力去进行收敛,多年前的 SCA(Software Composition Analysis 软件成分分析)技术又重出江湖,变成该领域⻛险治理的一个“神器”。本文主要探讨如何利用 SCA 技术实现对开源组件⻛险治理相关能力的建设与落地,希望给大家以启发或者帮助。

无图
bl blog.codingnow.com / 2022-06-19 19:22

层次组件的问题

最近思考了 ECS 框架中的一些问题。

具体业务中,有许多组件的构成非常复杂,本质上数据是有层次结构的。用一个二维表的结构很难清晰表述。它还牵扯到另一个问题:是否需要支持一个实体有多个统一类型的组件。例如,玩家实体身上多个装备栏、多个技能 Buf 该如何表达?

无图
mp mp.weixin.qq.com / 2021-12-05 19:26

组件封装之输入框下拉列表

项目开发的时候刚好遇到一个需求,需要在输入框输入名字的时候,弹出相应的人员列表提供选择,然后将数据赋值给输入框。项目是使用iview组件的,一开始想着在自定义iview的下拉选择,后来发现效果并不理想。为了实现功能,就在iview输入框的基础上进行了组件封装,下面就来讲下组件封装的过程。

无图
mp mp.weixin.qq.com / 2021-08-29 13:27

2021最顶级React组件库推荐

其实我主要把 Bootstrap 看作是一个 UI 库。它不会帮你赢得任何设计奖项,但可以用来完成一些边缘项目和最小可行产品。

无图