कुशल प्रणाली के साथ कुशल घटक निर्माण

हमारी टीम स्टाइल-घटकों का उपयोग करती है शैली के घटकों को प्रतिक्रिया करने के लिए।

हैबे पर स्टाइल-घटकों पर पहले से ही लेख हैं, इसलिए हम इस पर विस्तार से ध्यान नहीं देंगे।

पेश है स्टाइल वाले घटक
बेहतर, तेज, अधिक शक्तिशाली: स्टाइल-घटकों 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'}; 

स्टाइल सिस्टम

डुप्लिकेट संपत्तियों की नकल करना कष्टप्रद होने लगा, और हमने अलग-अलग पुन: प्रयोज्य कार्यों में कोड के डुप्लिकेट टुकड़ों को खींच लिया। लेकिन मुझे लगा कि शायद किसी ने हमारे सामने कुछ इस तरह से लागू किया है और शायद अधिक खूबसूरती और सार्वभौमिक रूप से। मैंने गूगल करना शुरू किया और एक स्टाइल सिस्टम पाया।

स्टाइल-सिस्टम शैली सुविधाओं का एक सेट प्रदान करता है। प्रत्येक शैली फ़ंक्शन गुणों का अपना सेट प्रदान करता है जो एप्लिकेशन थीम में परिभाषित मूल्यों के आधार पर शैली तत्वों को प्रदान करता है। स्टाइल सिस्टम में अधिकांश सीएसएस गुणों के लिए एक समृद्ध एपीआई है।

स्टाइल-घटकों के आधार पर स्टाइल सिस्टम उदाहरण

 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>, ); 

मुख्य लाभ

• उन गुणों को जोड़ता है जिनका उपयोग आप अपने स्वयं के थीम में कर सकते हैं।
• त्वरित सेटिंग उत्तरदायी फ़ॉन्ट आकार, मार्जिन, पैडिंग, चौड़ाई और अन्य सीएसएस गुणों के माध्यम से सहारा
• टाइपोग्राफी स्केलेबिलिटी
• मार्जिन और पैडिंग स्केलेबिलिटी
• किसी भी रंग पैलेट के लिए समर्थन
• अधिकांश सीएसएस-इन-जेएस पुस्तकालयों के साथ काम करता है, जिसमें स्टाइल-घटकों और भावनाएं शामिल हैं
• Rebass , Rebass ग्रिड और ट्रेन डिज़ाइन सिस्टम द्वारा उपयोग किया जाता है

कनेक्टिंग थीम्स

ऊपर, मैंने कोड उदाहरण प्रदान किया जो थीमप्रोविडर का उपयोग करता है। हम प्रदाता के लिए अपनी थीम पास करते हैं, और स्टाइल सिस्टम इसे प्रॉप्स के माध्यम से एक्सेस करता है।

हमारे विषय का एक उदाहरण

 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 मान नहीं है, लेकिन लाल मान को 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" /> 

कार्यालय में स्टाइल सिस्टम का अधिक विस्तृत विवरण और प्रलेखन । जीथब पृष्ठ

UPD: एक लेख लिखते समय, स्टाइल सिस्टम को प्रलेखन और उदाहरण https://styled-system.com/ के साथ अपना स्वयं का पेज मिला।