Style in React

前端之家收集整理的这篇文章主要介绍了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 封装组件
@H_403_32@
  • withTheme
  • @H_403_32@
  • 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
    @H_403_32@
  • styled-components has full theming support by exporting
  • a<ThemeProvider>wrapper component.
  • Function themes
  • Getting the theme without styled components
  • styled-component 上提供了个对比 @L_301_0@

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

    猜你在找的React相关文章