Style in React

前端模块化之后,CSS也能向模块一样导入, 之前提倡JS 与CSS分离,现在JS和CSS混合的方式又开始流行了。

CSS与JS分离

CSS Modules

  • No more conflicts 没有名称冲突
  • No global scope
  • Composing from other files
  • Composing from global class names

CSS in JSS

JSS

  • Theming 利用 ThemeProvider 和 theme 封装组件
  1. withTheme

  1. ThemeProvider

Benefits

  • Theming support out of the Box.
  • Critical CSS extraction.
  • Lazy evaluation - sheet is created only when component will mount.
  • Auto attach/detach - sheet will be rendered to the DOM when component is about to mount and will be removed when no element needs it.
  • A Style Sheet gets shared between all elements.

Styled-component

  • extend 继承

  • Theming
  1. styled-components has full theming support by exporting
  2. a<ThemeProvider>wrapper component.
  3. Function themes
  4. Getting the theme without styled components

styled-component 上提供了个对比 https://github.com/styled-com...

参考文献
https://glenmaddern.com/artic...
https://speakerdeck.com/vjeux...
http://www.alloyteam.com/2017...
https://hackernoon.com/the-co...

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...