通过样式化系统高效创建组件

我们的团队使用样式化组件来对React组件进行样式化。

Habré上已经有关于样式化组件的文章，因此我们将不对其进行详细介绍。

引入样式化组件
更好，更快，更强大：样式化组件v4

编写了许多组件之后，我们发现几乎在每个组件中都复制了重复的属性。

例如，在许多组件中，我们这样写：

padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'}; 

样式系统

复制重复的属性开始变得很烦人，我们将重复的代码段拉入了单独的可重用函数中。 但是我认为也许有人已经在我们之前实现了这样的功能，并且可能更精美，更通用。 我开始使用Google并发现了样式化的系统 。

带样式的系统提供了一组样式功能。 每个样式函数提供了自己的一组属性，这些属性根据应用程序主题中定义的值来设置元素的样式。 样式化的系统具有丰富的API，该API具有大多数CSS属性的功能。

基于样式化组件的样式化系统示例

 import { space, width, fontSize, color } from 'styled-system'; import styled, { ThemeProvider } from 'styled-components'; import theme from './theme'; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `; render( <ThemeProvider theme={theme}> <Box p={3} bg="whites.10" color="orange"> This is a Box </Box> </ThemeProvider>, ); 

主要好处

• 添加可以在自己的主题中使用的属性。
• 通过props快速设置响应字体大小，边距，填充，宽度和其他CSS属性
• 版式可扩展性
• 边距和填充可扩展性
• 支持任何调色板
• 适用于大多数css-in-js库，包括样式化组件和情感
• 由Rebass ， Rebass Grid和Priceline设计系统使用

连接主题

上面，我提供了使用ThemeProvider的代码示例。 我们将主题传递给提供者，样式化的系统通过props访问它。

我们主题的一个例子

 export const theme = { /**   */ fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], /**    */ space: [ // margin and padding 0, 4, 8, 16, 32, 64, 128, 256 ], /**   */ colors: { UIClientError: '#ff6c00', UIServerError: '#ff0000', UITriggerRed: '#fe3d00', UITriggerBlue: '#00a9f6', UIModalFooterLightBlueGray: '#f3f9ff', UIModalTitleDefault: colorToRgba('#5e6670', 0.4), UICheckboxIconCopy: colorToRgba('#909cac', 0.2) }, /**   */ buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, md: ` height: 34px; padding: 0 34px; font-size: 14px; letter-spacing: 0.4px; `, lg: ` height: 56px; padding: 0 56px; font-size: 20px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, /**   */ buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` } } 

样式的系统将尝试根据组件传递的属性在主题对象中查找值。 支持深度嵌套属性，如果在主题中找不到所传输的值，则该值将按原样解释。

例如，我们传递了组件color =“ red”。 主题对象中没有color.red值，但红色值将转换为红色的css。 因此，在检查员中进行翻译后，我们将看到

 color: red; 

使用主题值的其他示例

 // font-size: 24px (theme.fontSizes[4]) <Box fontSize={4} /> // margin: 16px (theme.space[3]) <Box m={3} /> // color: #ff6c00 (theme.colors.UIClientError) <Box color="UIClientError" /> // background color (theme.colors.UITriggerBlue) <Box bg="UITriggerBlue" /> // width: 50% <Box width={1/2} /> 

响应式

要快速描述响应式属性，只需传递一组值

 <Box width={[ 1, // 100% below the smallest breakpoint 1/2, // 50% from the next breakpoint and up 1/4 // 25% from the next breakpoint and up ]} /> // responsive font size <Box fontSize={[ 1, 2, 3, 4 ]} /> // responsive margin <Box m={[ 1, 2, 3, 4 ]} /> // responsive padding <Box p={[ 1, 2, 3, 4 ]} /> 

变体

样式化的系统使我们能够在主题中定义包含颜色，文本样式等集合的可重用对象。 例如，在上面的主题中，我们
我们使用按钮的大小和颜色的选项。

  /**   */ buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, /**   */ buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` } 

选项的实现：

 /**    */ export const buttonSize = variant({ /**   */ prop: 'size', /**  */ key: 'buttonSizes' }); /**    */ export const buttonColor = variant({ /**   */ prop: 'colors', /**  */ key: 'buttonColors' }); 

按钮组件

 /**   */ export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, } 

使用中型蓝色按钮的示例

 <Button size="md" colors="blue" /> 

办公室中样式系统的更详细的描述和文档。 github页面

UPD：撰写文章时，样式化的系统具有自己的页面，其中包含文档和示例https://styled-system.com/ 。