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

• 通过props 修改style

• 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...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!