We need a better UI component library - Styled System

2019/8/28
@ 2019 Modern Web

我們開發網站時，可能會使用 UI Library 讓專案開發更有效率，例如：早期的動態網站，透過 Bootstrap 或是 Pure CSS 等 CSS Framework ，幫助我們快速建立網站。

但隨著前端技術的演進，SPA （Single Page Application）架構興起，這些 CSS Framework 已經不太適合在「元件化」的專案裡使用，我們可能需要自己封裝，或是使用已經封裝好的 UI Library。

像是 Material-UI、Ant Design 等元件化的 UI Library，能夠讓我們直接透過 JavaScript 套用 UI Library，可以更方便使用別人撰寫好的樣式，但同時也失去了彈性，如果需要開發客製化的網站，我們不再像以前可以直接的修改 HTML 結構或是 CSS 樣式，使用這些 UI Component Libraries 反而提高專案維護的困難度。

如今我們希望能夠有一套 UI component Library 可以同時具有元件化的方便性，又能夠達成客製化的需求，透過 Styled System 幫助我們建立更有彈性的元件，組裝出屬於自己風格的網站！

Transcript

1. We need a better UI component library Anna Su STYLED SYSTEM
2. Anna Su Front-end engineer
3. 的時代 元件化
4. @LEGO
5. 可能 重複做 同樣的功能的元件 不同的專案裡
6. 同樣的元件 只有 樣式做 調整
7. Button Default Primary Disabled Link button Default Primary Disabled Link button
8. Checkbox Option 1 Option 2 Option 3 Option 1 Option 2 Option 3
9. Your Title Here This is the content area... OK Cancel Your Title Here This is the content area... OK Cancel Modal
10. Carousel
11. ⼤大部分元件的⾏行行為是 ⼀一致的
12. 所以 有沒有 開發更更快速的⽅方法？
13. 2011 Bootstrap 2017 Pure CSS Material UI 2018 Ant Design 2016 Blueprint Semantic UI 2014
14. 使⽤用 UI Library 的優缺點
15. Bootstrap Ant Design
16. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content.
17. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Desktop Mobile
18. Bootstrap
19. <div class="container custom-gutters!"> <div class="row!"> <div class="col-xs-12 col-lg-4!"> <div class="card!"> <div class="card-body!"> <h5 class="card-title!">Card title!</h5> <p class="card-text!"> Some quick example text to build on the card title and make up the bulk of the card's content. !</p> !</div> !</div> !</div> <div class="col-xs-12 col-lg-4!"> … !</div> <div class="col-xs-12 col-lg-4!"> … !</div> !</div> !</div> Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content.
20. <div class="container custom-gutters!"> <div class="row!"> <div class="col-xs-12 col-lg-4!"> <div class="card!"> <div class="card-body!"> <h5 class="card-title!">Card title!</h5> <p class="card-text!"> Some quick example text to build on the card title and make up the bulk of the card's content. !</p> !</div> !</div> !</div> <div class="col-xs-12 col-lg-4!"> … !</div> <div class="col-xs-12 col-lg-4!"> … !</div> !</div> !</div>
21. .card-title { … color: rgba(0, 0, 0, 0.85); background-color: white; } .card-text { … color: rgba(0, 0, 0, 0.65); background-color: white; } @media screen and (max-width: 992px) { .card-title { color: white; background-color: rgba(0, 0, 0, 0.7); } .card-text { color: black; background-color: rgba(0, 0, 0, 0.2); } }
22. Ant Design
23. <Row> <Col> <Card title="Card title" style={{ marginBottom: 16 }}> <p> Some quick example text to build on the card title and make up the bulk of the card's conte nt. !</p> !</Card> !</Col> <Col> … !</Col> <Col> … !</Col> !</Row> Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content.
24. <Row gutter={16}> <Col> <Card title="Card title!"> <p> Some quick example text to build on the card title and make up the bulk of the card's conte nt. !</p> !</Card> !</Col> <Col> … !</Col> <Col> … !</Col> !</Row>
25. 找到對應的 class 名稱，再覆蓋樣式 但如果需要變更更樣式
26. @media screen and (max-width: 768px) { .ant-card { border: none; } .ant-card-head { background-color: rgba(0, 0, 0, 0.7); color: white; } .ant-card-body { background-color: rgba(0, 0, 0, 0.2); color: black; } }
27. @media screen and (max-width: 768px) { .ant-card { border: none; } .ant-card-head { background-color: rgba(0, 0, 0, 0.7); color: white; } .ant-card-body { background-color: rgba(0, 0, 0, 0.2); color: black; } }
28. 使⽤用 UI Library 的優缺點 可以快速完成功能，但是改樣式比較複雜 可以直覺修改 ＨTML 結構或者 CSS 樣式，但是無法快速完成功能
29. 別⼈人做好的元件可以 快速完成功能
30. 如果元件需要 客製化樣式？
31. 開發與維護 成本提⾼高
32. 想要更更 彈性的修改樣式
33. 客製化元件 選擇⾃自⾏行行開發
34. 客製化元件遇到的問題
35. 傳入 props 名稱 不⼀一致
36. Button2 Button1 Label2 Label1
37. Button2 Button1 <Button color="white" backgroundColor="blue!">Button1!</Button> const Button = styled.div` color: ${props !=> props.color}; background-color: ${props !=> props.backgroundColor}; border-radius: 10px; cursor: pointer; … `;
38. Label2 Label1 <Label fontColor="green" borderColor="green!">Label1!</Label> const Label = styled.div` color: ${props !=> props.fontColor}; border-color: ${props !=> props.borderColor}; border-radius: 10px; … `;
39. <Label fontColor="green" borderColor="green!">Label1!</Label> Button2 Button1 Label2 Label1 <Button color="white" backgroundColor="blue!">Button1!</Button>
40. <ArticleCard marginRight="16px!">!!...!</ArticleCard> <MemberCard mr="8px" >!!...!</MemberCard> Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. anna@branch8.com 935-721-3322 Anna Su Front-End Developer
41. 客製化樣式需傳入對應的 props 程式碼很 繁冗
42. Button B U T T O N Button
43. Button B U T T O N Button const StyledButton = styled.button` padding: ${(props) !=> props.padding}; margin-left: ${(props) !=> props.marginLeft}; width: ${(props) !=> props.width}; height: ${(props) !=> props.height}; font-size: ${(props) !=> props.fontSize}; font-family: ${(props) !=> props.fontFamily}; line-height: ${(props) !=> props.lineHeight}; border: ${(props) !=> props.border}; border-radius: ${(props) !=> props.borderRadius}; color: ${(props) !=> props.color}; background-color: ${(props) !=> props.backgroundColor}; cursor: pointer; … `;
44. Button B U T T O N Button const StyledButton = styled.button` padding: ${(props) !=> props.padding}; margin-left: ${(props) !=> props.marginLeft}; width: ${(props) !=> props.width}; height: ${(props) !=> props.height}; font-size: ${(props) !=> props.fontSize}; font-family: ${(props) !=> props.fontFamily}; line-height: ${(props) !=> props.lineHeight}; border: ${(props) !=> props.border}; border-radius: ${(props) !=> props.borderRadius}; color: ${(props) !=> props.color}; background-color: ${(props) !=> props.backgroundColor}; cursor: pointer; … `;
45. 傳入 props 格式 不⼀一致
46. Error Success
47. <Label success>Success!</Label> <Label error>Error!</Label> Error Success
48. <Label success>Success!</Label> <Label error>Error!</Label> <Label success error>Success!</Label> Error Success
49. Button Button Button Default Small Large
50. Button Button Button Default Small Large <SmallButton small>Button!</SmallButton> <SmallButton size="small!">Button!</SmallButton> <Button>Button!</Button> <Button size="default!">Button!</Button> <LargeButton large>Button!</LargeButton> <LargeButton size="large!">Button!</LargeButton>
51. Button Button Button Default Small Large <SmallButton small>Button!</SmallButton> <SmallButton size="small!">Button!</SmallButton> <Button>Button!</Button> <Button size="default!">Button!</Button> <LargeButton large>Button!</LargeButton> <LargeButton size="large!">Button!</LargeButton>
52. 不同狀狀態顯⽰示不同樣式時 程式碼需要 封裝
53. Danger Primary Default
54. const getTheme = obj !=> status !=> obj[status]; const buttonStyles = { default: { padding: '8px', color: 'white', backgroundColor: 'gray', … }, primary: { padding: '8px', color: 'white', backgroundColor: 'blue', … }, danger: { padding: '8px', color: 'black', backgroundColor: 'tomato', … }, }; const buttonTheme = getTheme(buttonStyles); Danger Primary Default
55. Danger Primary Default <Button style={buttonTheme('default')}>Button!</Button>; <Button style={buttonTheme('primary')}>Button!</Button>; <Button style={buttonTheme('danger')}>Button!</Button>;
56. Danger Primary Default <Button style={buttonTheme('default')}>Button!</Button>; <Button style={buttonTheme('primary')}>Button!</Button>; <Button style={buttonTheme('danger')}>Button!</Button>;
57. user payment order validation shop approval driver assignment
58. <Label style={labelTheme('order-validation')}>order validation!</Label> <Label style={labelTheme('user-payment')}>user payment!</Label> <Label style={labelTheme('shop-approval')}>shop approval!</Label> <Label style={labelTheme('driver-assignment')}>driver assignment!</Label> user payment order validation shop approval driver assignment
59. <Label style={labelTheme('order-validation')}>order validation!</Label> <Label style={labelTheme('user-payment')}>user payment!</Label> <Label style={labelTheme('shop-approval')}>shop approval!</Label> <Label style={labelTheme('driver-assignment')}>driver assignment!</Label> user payment order validation shop approval driver assignment Danger Primary Default <Button style={buttonTheme('default')}>Button!</Button>; <Button style={buttonTheme('primary')}>Button!</Button>; <Button style={buttonTheme('danger')}>Button!</Button>;
60. RWD 元件開發 複雜
62. const Article = styled.div` width: 100%; … @media (min-width: 567px) { width: 50%; … } @media (min-width: 768px) { width: 25%; … } `;
63. const Article = styled.div` width: 100%; … @media (min-width: 567px) { width: 50%; … } @media (min-width: 768px) { width: 25%; … } `;
64. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer
65. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer const Info = styled.div` display: flex; justify-content: flex-start; margin-bottom: 5px; font-size: 12px; … @media (max-width: 992px) { justify-content: space-between; margin-bottom: 13px; font-size: 14px; … } `;
66. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer const Info = styled.div` display: flex; justify-content: flex-start; margin-bottom: 5px; font-size: 12px; … @media (max-width: 992px) { justify-content: space-between; margin-bottom: 13px; font-size: 14px; … } `;
67. 1. 傳入 props 命名不⼀一致 2. 客製化樣式需傳入對應的 props，程式碼很繁冗 3. 不同狀狀態顯⽰示不同樣式時，程式碼需要封裝 4. RWD 元件開發複雜 客製化元件遇到的問題
68. 透過 Styled System 建立更更好的元件
69. ⼤大幅降低 props 命名不⼀一致的問題
70. consistent styling API
71. Button2 Button1
72. import { color } from 'styled-system'; const Button = styled.div` ${color} … `; <Button color="white" bg="blue!">Button!</Button>
73. import { color } from 'styled-system'; const Button = styled.div` ${color} … `; <Button color="white" bg="blue!">Button!</Button>
74. <Label color="green" borderColor="green!">Label1!</Label> Button2 Button1 Label2 Label1 <Button color="white" bg="blue!">Button1!</Button>
75. <ArticleCard mr="16px!">!!...!</ArticleCard> <MemberCard mr="8px" >!!...!</MemberCard> Card title Some quick example text to build on the card title and make up the bulk of the card’s content. Card title Some quick example text to build on the card title and make up the bulk of the card’s content. anna@branch8.com 935-721-3322 Anna Su Front-End Developer
76. 更更好的抽象化樣式，程式碼寫得更更少
77. Button B U T T O N Button
78. Button B U T T O N Button const StyledButton = styled.button` padding: ${(props) !=> props.padding}; margin-left: ${(props) !=> props.marginLeft}; width: ${(props) !=> props.width}; height: ${(props) !=> props.height}; font-size: ${(props) !=> props.fontSize}; font-family: ${(props) !=> props.fontFamily}; line-height: ${(props) !=> props.lineHeight}; border: ${(props) !=> props.border}; border-radius: ${(props) !=> props.borderRadius}; color: ${(props) !=> props.color}; background-color: ${(props) !=> props.backgroundColor}; cursor: pointer; … `;
79. Button B U T T O N Button const StyledButton = styled.button` ${space} ${layout} ${typography} ${border} ${color} cursor: pointer; `;
80. const StyledButton = styled.button` padding: ${(props) !=> props.padding}; margin-left: ${(props) !=> props.marginLeft}; width: ${(props) !=> props.width}; height: ${(props) !=> props.height}; font-size: ${(props) !=> props.fontSize}; font-family: ${(props) !=> props.fontFamily}; line-height: ${(props) !=> props.lineHeight}; border: ${(props) !=> props.border}; border-radius: ${(props) !=> props.borderRadius}; color: ${(props) !=> props.color}; background-color: ${(props) !=> props.backgroundColor}; cursor: pointer; … `; const StyledButton = styled.button` ${space} ${layout} ${typography} ${border} ${color} cursor: pointer; `;
81. import { space, layout, typography, border, color } from 'styled-system'; const StyledButton = styled.button` ${space} ${layout} ${typography} ${border} ${color} cursor: pointer; `;
82. 根據不同狀狀態，更更彈性的修改對應樣式
83. Error Success
84. <Label success>Success!</Label> Error Success <Button variant="success" !/>
85. Danger Primary Default
86. Danger Primary Default import { variant } from 'styled-system' const Button = styled.div` ${variant({ variants: { default: { p: "8px", color: "white", backgroundColor: "gray" … }, primary: { p: "8px", color: "white", backgroundColor: "blue" }, danger: { p: "8px", color: "black", backgroundColor: "tomato" }, } })} `
87. Danger Primary Default <Button>Button!</Button> <Button variant='primary'>Button!</Button> <Button variant='danger'>Button!</Button> Button.defaultProps = { variant: 'default', }
88. const getTheme = obj !=> status !=> obj[status]; const buttonStyles = { default: { padding: '8px', color: 'white', backgroundColor: ‘gray', … }, primary: { padding: '8px', color: 'white', backgroundColor: ‘blue', … }, danger: { padding: '8px', color: 'black', backgroundColor: ‘tomato', … }, }; const buttonTheme = getTheme(buttonStyles); import { variant } from 'styled-system' const Button = styled.div` ${variant({ variants: { default: { p: "8px", color: "white", backgroundColor: "gray" … }, primary: { p: "8px", color: "white", backgroundColor: "blue" }, danger: { p: "8px", color: "black", backgroundColor: "tomato" }, } })} `
89. <Button style={buttonTheme('default')}>Button!</Button>; <Button style={buttonTheme('primary')}>Button!</Button>; <Button style={buttonTheme('danger')}>Button!</Button>; <Button variant='primary'>Button!</Button> <Button>Button!</Button> <Button variant='danger'>Button!</Button> Button.defaultProps = { variant: 'default', }
90. 靈活的處理理 RWD 樣式
92. const breakpoints = ['576px', '768px']; <Article width={[1, 1 / 2, 1 / 4]} !/>
93. const breakpoints = ['576px', '768px']; <Article width={[1, 1 / 2, 1 / 4]} !/>
94. const Article = styled.div` width: 25%; … @media (min-width: 567px) { width: 50%; … } @media (min-width: 768px) { width: 100%; … } `; <Article width={[1, 1 / 2, 1 / 4]} !/> const breakpoints = ['576px', '768px'];
95. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer
96. Anna Su Front-End Developer anna@branch8.com 935-721-3322 anna@branch8.com 935-721-3322 Anna Su Front-End Developer import { flexbox, space, typography } from 'styled-system'; const Info = styled.div` display: flex; ${flexbox} ${space} ${typography} `; <Info justifyContent={['flex-start', 'space-between']} mb={[5, 13]} fontSize={[12, 14]}> !</Info>
97. 透過 theme 快速變更更主題樣式
98. theme.js const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
99. import React from 'react'; import { ThemeProvider } from 'styled-components'; import theme from './theme'; const App = props !=> ( <ThemeProvider theme={theme}> {!/* application elements !*/} !</ThemeProvider> ) export default App;
100. import React from 'react'; import { ThemeProvider } from 'styled-components'; import theme from './theme'; const App = props !=> ( <ThemeProvider theme={theme}> {!/* application elements !*/} !</ThemeProvider> ) export default App; const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } }
101. <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
102. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
103. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
104. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
105. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
106. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { black: '#000', blacks: ['#ccc', '#999'] white: '#fff', primary: '#456000', }, button: { !!... }, breadcrumb: { !!... } … pagination: { !!... } } <Box m={2} !/> <Box p={[2, 3]} !/> <Box fontSize={[1, 2]} !/> <Box color="primary" !/> <Box color="blacks.0" !/>
107. 透過 theme 搭配 variant 快速修改不同狀狀態的樣式
108. Button B U T T O N Button Default Small Large Button Button Button Primary Default Danger Button Button Button Other button themes
109. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { !!... }, buttons: { default: { !!... }, primary: { color: "white", backgroundColor: "blue", … '&:hover': { !!... }, '&:active': { !!... }, '&:disabled': { !!... }, }, danger: { !!... }, size: { default: { !!... }, large: { height: 40, !!... }, small: { !!... }, }, }, … } Button Button Button Button Button Button
110. <Button variant="primary" size="large!">Button!</Button> const Button = styled.button` display: inline-flex; align-items: center; justify-content: center; cursor: pointer; !!... ${buttonStyle} ${buttonSizeStyle} `; const buttonStyle = variant({ key: 'buttons', }); const buttonSizeStyle = variant({ prop: 'size', key: 'buttons.size', }); Button Button Button Primary Default Danger
111. const buttonStyle = variant({ key: 'buttons', }); const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { !!... }, buttons: { default: { !!... }, primary: { color: "white", backgroundColor: "blue", … '&:hover': { !!... }, '&:active': { !!... }, '&:disabled': { !!... }, }, danger: { !!... }, }, … } Button Button Button Primary Default Danger
112. <Button variant="primary" size="large!">Button!</Button> const Button = styled.button` display: inline-flex; align-items: center; justify-content: center; cursor: pointer; !!... ${buttonStyle} ${buttonSizeStyle} `; const buttonStyle = variant({ key: 'buttons', }); const buttonSizeStyle = variant({ prop: 'size', key: 'buttons.size', }); Button Button Button Default Small Large
113. Button Button Button Default Small Large const buttonSizeStyle = variant({ prop: 'size', key: 'buttons.size', }); const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], colors: { !!... }, buttons: { … size: { default: { !!... }, large: { height: "40px", !!... }, small: { !!... }, }, }, … }
114. 透過 theme 更更彈性的調整 RWD 樣式
117. const theme = { !!... card: { !!... wrapper: { vertical: { flexDirection: 'column', }, horizontal: { flexDirection: 'row', }, }, } }
118. const cardWrapperStyle = variantResponsive({ key: 'card.wrapper', }); const Card = styled.a` position: relative; display: flex; overflow: hidden; ${cardWrapperStyle} … `;
119. <Card variant={['vertical', 'horizontal']} header="title" > … !</Card>
120. 透過 themeGet 拿到 theme 的值 統⼀一管理理共⽤用樣式
121. 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1
122. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], !!... pagination: { item: { fontSize: "14px", color: "blue", backgroundColor: "transparent", border: { top: 0, left: 0, right: 0, bottom: "2px", }, borderRadius: 0, !!... }, !!... } … }; 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1
123. 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1 6 5 4 3 2 1 const PaginationItem = styled.li` display: inline-block; cursor: pointer; user-select: none; !!... font-size: ${themeGet('pagination.item.fontSize')}; color: ${themeGet('pagination.item.color')}; background-color: ${themeGet('pagination.item.backgroundColor')}; border-top: ${themeGet('pagination.item.border.top')}; border-right: ${themeGet('pagination.item.border.right')}; border-bottom: ${themeGet('pagination.item.border.bottom')}; border-left: ${themeGet('pagination.item.border.left')}; border-radius: ${themeGet('pagination.item.borderRadius')}; `;
124. const theme = { breakpoints: ['992px'], space: [0, 4, 8, 16, 24, 32, 64], fontSizes: [12, 14, 16, 20, 24, 32], !!... pagination: { item: { fontSize: "14px", color: "blue", backgroundColor: "transparent", border: { top: 0, left: 0, right: 0, bottom: "2px", }, borderRadius: 0, !!... }, !!... } … }; const PaginationItem = styled.li` display: inline-block; cursor: pointer; user-select: none; !!... font-size: ${themeGet('pagination.item.fontSize')}; color: ${themeGet('pagination.item.color')}; background-color: ${themeGet('pagination.item.backgroundColor')}; border-top: ${themeGet('pagination.item.border.top')}; border-right: ${themeGet('pagination.item.border.right')}; border-bottom: ${themeGet('pagination.item.border.bottom')}; border-left: ${themeGet('pagination.item.border.left')}; border-radius: ${themeGet('pagination.item.borderRadius')}; `;
125. 6 5 4 3 2 1 const theme = { !!... pagination: { item: { fontSize: "14px", color: "blue", backgroundColor: "transparent", border: { top: 0, left: 0, right: 0, bottom: "2px", }, borderRadius: 0, !!... }, } … }; const theme = { !!... pagination: { item: { fontSize: "14px", color: "orange", backgroundColor: "transparent", border: { top: "1px", left: "1px", right: "1px", bottom: "1px", }, borderRadius: "50%", !!... }, } … }; 6 5 4 3 2 1
126. 6 5 4 3 2 1 const theme = { !!... pagination: { item: { fontSize: "14px", color: "blue", backgroundColor: "transparent", border: { top: 0, left: 0, right: 0, bottom: "2px", }, borderRadius: 0, !!... }, } … }; const theme = { !!... pagination: { item: { fontSize: "14px", color: "orange", backgroundColor: "transparent", border: { top: "1px", left: "1px", right: "1px", bottom: "1px", }, borderRadius: "50%", !!... }, } … }; 6 5 4 3 2 1
127. const theme = { !!... pagination: { item: { fontSize: "14px", color: "white", backgroundColor: "green", border: { top: 0, left: 0, right: 0, bottom: 0, }, borderRadius: "50%", !!... }, } … }; const theme = { !!... pagination: { item: { fontSize: "14px", color: "white", backgroundColor: "blue", border: { top: 0, left: 0, right: 0, bottom: 0, }, borderRadius: "5px", !!... }, } … }; 6 5 4 3 2 1 6 5 4 3 2 1
128. const theme = { !!... pagination: { item: { fontSize: "14px", color: "white", backgroundColor: "green", border: { top: 0, left: 0, right: 0, bottom: 0, }, borderRadius: "50%", !!... }, } … }; const theme = { !!... pagination: { item: { fontSize: "14px", color: "white", backgroundColor: "blue", border: { top: 0, left: 0, right: 0, bottom: 0, }, borderRadius: "5px", !!... }, } … }; 6 5 4 3 2 1 6 5 4 3 2 1
129. 1. ⼤大幅降低 props 命名或格式不⼀一致的問題 2. 更更好的抽象化樣式，程式碼變得更更少 3. 根據不同狀狀態，更更彈性的修改對應樣式 4. 靈活的處理理 RWD 樣式 5. 透過 theme 快速變更更主題樣式 解決的問題 Styled System
130. 使⽤用 Styled System 開發專案的⼼心得
131. 我們需要有 Style Guide 客製化元件以前
132. @84colors @venngage
133. @Twitter
134. 做出來來的畫⾯面可能跟設計師想的 不⼀一樣 如果沒有 Style Guide
135. 可以在開發時，更更全⾯面思考該如何抽象化樣式 Design system
141. https://jxnblk.com/ https://styled-system.com https://www.lego.com https://blog.twitter.com/developer https://unsplash.com/ https://www.flaticon.com/ Reference