रिएक्ट के साथ सीएसएस आर्किटेक्चर जिसे

Question

थीम्ड किया जा सकता है, मैं वर्तमान में एक बड़ा रिएक्ट ऐप तैयार कर रहा हूं। सीएसएस, मेरा मजबूत बिंदु कभी नहीं रहा है। लेकिन अब सीएसएस में प्रतिक्रिया के साथ sass/cssNext/इनलाइन शैलियों है। मैं एसएएस के साथ बीईएम का उपयोग कर रहा हूं, लेकिन जैसा कि मेरे अन्य अनुप्रयोगों में भी बड़ा हो गया है, जो टूटने लगते हैं। विशेष रूप से जब आपके पास प्राथमिक रंग योजनाओं के बाहर वाले पृष्ठ "पुनः त्वचा" या "विषय" की क्षमता थी ..

तो - क्या कोई मुझे प्रतिक्रिया के साथ सीएसएस बनाने के लिए एक सिद्ध तरीके से इंगित कर सकता है स्केल बहुत अच्छी तरह से, और जब लोग मेरे घटकों को उधार लेना चाहते हैं तो custome थीमिंग के लिए अनुमति देता है। उदाहरण के लिए,

<MyComponent /> 
// this component has its styles but lets say Joe Schmoe wants be import 
// it? But, Joe wants to overlay his custom styles? 
// Is there a new paradigm that allows for an overlay or reskin within the component? 

या पूरे आवेदन का विचार लाइन के नीचे कुछ समय तक स्किनेबल होने का विचार भी है। मुझे पता है कि यह एक बहुत ही मूल सवाल है, लेकिन जब भी मैं परियोजनाओं का निर्माण करता हूं तो मेरे दर्द बिंदु भी सीएसएस प्रतीत होते हैं - इसलिए मैं जानना चाहता हूं कि वास्तव में क्या काम करता है।

Answer 1

यह हाल ही में, प्रतिक्रिया दुनिया में एक हल समस्या नहीं थी।

मैं एक प्रतिक्रिया घटक पुस्तकालय ElementalUI के रखरखाव में से एक हूं, और हम पिछले 6-12 महीनों के लिए स्टाइल के सभी अलग-अलग तरीकों का प्रयास कर रहे हैं। (!) आप इसे नाम दें, हमने कोशिश की है। (मैंने अपने ReactNL keynote के दौरान कुछ सबसे लोकप्रिय पुस्तकालयों के साथ अपने अनुभवों के बारे में बात की और जहां वे टूट गए)

मुद्दा यह है कि मौजूदा स्टाइल पुस्तकालयों में से कोई भी इनका उपयोग करने के लिए अंतर्निहित समर्थन नहीं है। आप इसे अधिकतर हैकी, गैर-उपयोगकर्ता के अनुकूल तरीके से कर सकते हैं, लेकिन जब आप एक घटक वितरित करते हैं, तो यह वही नहीं है जो आप चाहते हैं, है ना?

---

यही कारण है कि हमने styled-components बनाया। styled-components में दिलचस्प गुणों का एक समूह है, और उनमें से एक यह है कि थीमिंग सीधे लाइब्रेरी में बनाई गई है, जिससे इसे वितरित घटकों के निर्माण के लिए सही विकल्प मिल गया है!

यहां संक्षिप्त स्पष्टीकरण है, हालांकि मैं आपको documentation से गुजरने के लिए प्रोत्साहित करता हूं जो सबकुछ बताता है!

import React from 'react'; 
import styled from 'styled-components'; 

// Create a <Wrapper> react component that renders a <section> with 
// some padding and a papayawhip background 
const Wrapper = styled.section` 
    padding: 4em; 
    background: papayawhip; 
`; 

यह चर, Wrapper, अब घटकों प्रतिक्रिया है आप प्रदान कर सकते हैं:

// Use them like any other React component – except they're styled! 
<Wrapper> 
    <Title>Hello World, this is my first styled component!</Title> 
</Wrapper> 

(यदि

यह styled-components का मूल उपयोग कैसा दिखाई देता है है आप छवि पर क्लिक करते हैं आपको एक लाइव प्लेग्राउंड मिलेगा)

जब आप टैग किए गए टेम्पलेट शाब्दिक में एक इंटरपोलेटेड फ़ंक्शन पास करते हैं, तो हम आपको घटक को पास की गई गुणों को पास करते हैं। इसका मतलब है आप रंगमंच की सामग्री के लिए अनुकूल कर सकते हैं:

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Adapt the colors based on primary prop */ 
    background: ${props => props.primary ? 'palevioletred' : 'white'}; 
    color: ${props => props.primary ? 'white' : 'palevioletred'}; 

    font-size: 1em; 
    margin: 1em; 
    padding: 0.25em 1em; 
    border: 2px solid palevioletred; 
    border-radius: 3px; 
`; 

यहाँ, हम एक Button घटक है कि आप किसी भी अन्य की तरह primary कर सकते हैं बनाने के बाद प्रतिक्रिया घटक:

<Button>Normal</Button> 
<Button primary>Primary</Button> 

अब आता है थीमिंग पहलू। हम एक घटक ThemeProvider कहा जाता है कि आप करने के लिए एक theme गुजरती हैं और में अपना एप्लिकेशन (या एप्लिकेशन के कुछ हिस्सों) लपेट कर सकते हैं निर्यात: संदर्भ के लिए कितना गहरा धन्यवाद कि ThemeProvider भीतर

import { ThemeProvider } from 'styled-components'; 

const theme = { 
    main: 'mediumseagreen', 
}; 

ReactDOM.render(
    <ThemeProvider theme={theme}> 
    <MyApp /> 
    </ThemeProvider>, 
    myElem 
); 

अब किसी भी स्टाइल घटक, कोई फर्क नहीं पड़ता, होगा इस theme प्रोप में इंजेक्शन प्राप्त करें।

यह वही एक themable Button कैसा दिखेगा है:

import styled from 'styled-components'; 

const Button = styled.button` 
    /* Color the background and border with theme.main */ 
    background: ${props => props.theme.main}; 
    border: 2px solid ${props => props.theme.main}; 

    /* …more styles here… */ 
`; 

अब आप अपने Buttontheme इसे पारित हो जाता है लेने के लिए और बदलने यह है कि के आधार पर स्टाइल है होगा! (आप defaultProps के माध्यम से डिफ़ॉल्ट भी प्रदान कर सकते हैं)

यह styled-components का सारांश है और यह वितरित घटकों को बनाने में कैसे मदद करता है!

हमारे पास वर्तमान में डब्ल्यूआईपी doc about writing third-party component libraries है जो मैं आपको जांचने के लिए प्रोत्साहित करता हूं, और निश्चित रूप से सामान्य दस्तावेज भी एक अच्छा पढ़ा जाता है। हमने सभी अड्डों को कवर करने की कोशिश की है, इसलिए यदि आप कुछ भी नापसंद देखते हैं या आपको लगता है कि गायब है तो कृपया हमें तुरंत बताएं और हम चर्चा करेंगे!

यदि आपके पास styled-components के बारे में कोई अन्य प्रश्न है तो यहां जवाब देने या ट्विटर पर पहुंचने के लिए स्वतंत्र महसूस करें। (@mxstbr)

Answer 2

मुझे नहीं पता कि सबसे अच्छा तरीका क्या है। मुझे लगता है कि यह एक व्यक्तिगत वरीयता की तरह है। मैं केवल उन टूल्स को साझा करूंगा जो मैं उपयोग कर रहा हूं। मैं क्या उपयोग कर रहा हूं postcss के साथ है।

सीएसएस-मॉड्यूल आपको अपने प्रत्येक सीएसएस वर्गों के लिए वैश्विक अद्वितीय नाम के साथ एक स्थानीय-स्कोप्ड पहचानकर्ता बनाने की शक्ति देता है और एक मॉड्यूलर और पुन: प्रयोज्य सीएसएस भी सक्षम करता है! आप वैश्विक सेटिंग्स फ़ाइल बनाने के लिए postcss-modules-values का भी उपयोग कर सकते हैं जिसमें सभी सेटिंग्स चर शामिल हैं। ताकि आप अपनी वेबसाइट के लिए थीम बदल सकें।

यहां मैं घटकों को कैसे बना सकता हूं। मेरे प्रत्येक घटक में एक सीएसएस फ़ाइल होगी जो बनाए रखने या परिवर्तन करने में बहुत आसान है।

यहाँ बटन घटक के लिए कोड है।

function Button(props) { 
    const className = props.className ? `${styles.button} ${props.className}` : styles.button; 

    return (
    <button disabled={props.disabled} className={`${className}`} type="button" onClick={props.onClick}> 
     {Children.toArray(props.children)} 
    </button> 
); 
} 

ध्यान दें कि मेरे पास घटक के लिए कक्षा नाम है जो बटन घटक के लिए कक्षा में अन्य घटक को पास करने की अनुमति देता है। ताकि जब कोई आपके घटक को उधार लेता है तो वे आपके बटन शैलियों को बढ़ा या ओवरराइड कर सकते हैं।

यदि आपको एक अनुकूलन वेबसाइट बनाने की आवश्यकता है, तो मैं Less.js का उपयोग करने की भी सिफारिश करूंगा जो अनुकूलित वेबसाइट का लाइव पूर्वावलोकन प्रदान करता है।