以下套件皆可在 npm 中下載,已下為筆記整理和優缺點比較
比較 emtion vs styled vs Radium vs Aphrodite
Radium
- 偽類只支援
':hover' ':focus' ':active'
- 偽元素 ❌
- Unpacked Size 785 kB
- 壓縮後最小Size 23 kB
- Media queries ✔️
- Keyframes ✔️
- @font-face ❌
- 週下載量: 11萬
- 被標註星星數: 7.2k
要用radium()包住class 若要用media query 則外層還需要用StyleRoot包住
範例:
Aphrodite
- 偽類只支援 ✔️
- 偽元素 ✔️
- Unpacked Size 808 kB
- 壓縮後最小 Size 7 kB
- Media queries ✔️
- Keyframes ✔️
- @font-face ✔️
- 週下載量: 28萬
- 被標註星星數: 4.9k
要用StyleSheet創建stlye物件,再用css包住StyleSheet
範例:
@Emotion/core
- 偽類只支援 ✔️
- 偽元素 ✔️
- Unpacked Size 197 kB
- 壓縮後最小 Size 5 kB
- Media queries ✔️
- Keyframes ✔️
- @font-face ✔️
- 週下載量: 220萬
- 被標註星星數: 10.1k
Emotion vs @emtion/core 差別在於,@emtion/core更小包,只有精簡功能
用css()包住style物件 墜詞前都要 & 如 :hover 要變成 &:hover
範例:
/** @jsx jsx 這邊告訴 babel編譯的時候要用 jsx編譯 一定要加 */ import { jsx, css } from "@emotion/core"; const styles = { //css`類型` containner: css` height: 50px; width: 100%; color: pink; background-color: rgb(50, 50, 50); display: flex; justify-content: space-around; font-size: 30px; line-height: 50px; @media (max-width: 500px) { font-size: 20px; &:hover : { font-size: 35px; } } ` }; const Tstyle = (props) => ({ //object類型 兩者都可通 backgroundColor: "rgba(180,180,180,0.5)", color: props || "red", "&:hover": { color: "yellow" } }); const cssVariable = "pink"; const EmotionDemo = (props) => { return ( <div> <div css={styles.containner}>MediaQuery</div> <div css={Tstyle()}></div> {/* 給值 */} <div css={css(Tstyle("green"))} style={{}}> Secondary </div> {/* 一樣可以用 object的方式來給CSS */} <div css={{ padding: 8, border: "2px solid blue" }} /> {/* 一樣可以用 也可以增加變數 */} <div css={css({ ...Tstyle(), color: `${cssVariable}` })}>Hover me</div> </div> ); }; export default EmotionDemo;
或使用完整 emotion套件
用styled 取代原始標籤式語法,用props完成動態調整CSS
用法族繁不及備載
範例2:
import styled from '@emotion/styled' const Button = styled.button` color: ${props => props.primary ? 'hotpink' : 'turquoise'}; ` const Container = styled.div(props => ({ display: 'flex', flexDirection: props.column && 'column' })) render( <Container column> <Button>This is a regular button.</Button> <Button primary>This is a primary button.</Button> </Container> )
Styled-Component
- 偽類只支援 ✔️
- 偽元素 ✔️
- Unpacked Size 1.4 MB
- 壓縮後最小 Size 12 kB
- Media queries ✔️
- Keyframes ✔️
- @font-face ✔️
- 週下載量: 150萬
- 被標註星星數: 28k
用styled 取代原始標籤式語法,用props完成動態調整CSS
墜詞前都要 & 如 :hover 要變成 &:hover
範例:
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ${props => props.primary && css` background: white; color: black; `} ` render( <div> <Button href="https://github.com/styled-components/styled-components" target="_blank" rel="noopener" primary > GitHub </Button> <Button as={Link} href="/docs"> Documentation </Button> </div> )
特點比較 | radium | Aphrodite | @emotion/core | Styled-Component |
---|---|---|---|---|
CSS語法支援度 | 普通 | 好 ✔️ | 好 ✔️ | 好 ✔️ |
靈活性 | 低 | 中 | 高 ✔️ | 高 ✔️ |
目前使用度 | 少 | 中 | 多 ✔️ | 多 ✔️ |
易使用性 | 最易 ✔️ | 容易 | 易~難 | 中等~難 |
壓縮後size | 最大(但還是很小) | 小 | 最小 ✔️ | 小 |
更新度 | 停更 | 停更 | 2020仍更新 | 2020仍更新 |
tags: React
React-CSS
總結:
新手入門推薦 radium / Aphrodite
專案推薦: emtion / styled-componet
都可以很好的用JS替代 css sass less
@copyright MRcodingRoom
觀看更多文章請點MRcoding筆記
觀看更多文章請點MRcoding筆記
謝謝你的整理!
不客氣,感謝留言