框架中的 CSS

Angular Vue React 三大框架

Angular Vue 内置样式集成

React 一些业界实践

Angular 

Angular . js (1.x):没有样式集成能力

Angular (2+):提供了样式封装能力  2.与组件深度集成

ShadowDOM谈一谈神奇的ShadowDOM):1.逻辑上一个DOM  2.结构上存在子集结构

Scoped CSSScoped CSS规范):1.限定了范围的CSS 2.无法影响外部元素 3.外部样式一般不影响内部 4.可以通过 /deep 或 >>> 穿透

达到封装效果:模拟 Scoped CSS  方案1.随机选择器(不支持)2.随机属性  <div abc>----div[abc]{ }

Angular 中加载 css 方法

 

Vue

模拟 Scoped CSS  方案1.随机选择器 css modules  2.随机属性  <div abc>----div[abc]{ }

参见:详解在Vue中有条件地使用CSS类      

在Vue中使用样式

 

React (React入门教程

官方没有集成方案   

社区方案:1. css modules (需要自己编译,将 class name 放到结构中)  参见博客

2.(babel) react-css-modules (正常写 class 即可)

3.styled components (将组件和样式封装到一起,变成带有样式的组件)

4.styled jsx (直接在 jsx 中写样式,简单粗暴)

参见博客:react 中 css 的使用    定义组件和css样式

react中书写css的三种方式    React.js中的CSS使用

相关文章:

  • 2021-12-14
  • 2021-12-14
  • 2021-10-17
  • 2021-07-18
  • 2021-12-14
  • 2021-07-25
  • 2021-08-02
  • 2021-12-14
猜你喜欢
  • 2022-01-24
  • 2022-12-23
  • 2022-12-23
  • 2021-12-07
  • 2021-08-06
  • 2021-12-04
  • 2021-06-06
相关资源
相似解决方案