स्टाइल-घटक

Question

के साथ जावास्क्रिप्ट वैरिएबल का उपयोग करके मैं अपने घटकों को बनाने के लिए styled-components का उपयोग कर रहा हूं। सभी मूल्य गुण जो कस्टम मान स्वीकार करते हैं, मेरे घटकों में पुन: उपयोग किए जाते हैं (जैसा कि यह होना चाहिए)। इस बात को ध्यान में रखते हुए, मैं कुछ प्रकार के वैश्विक चर का उपयोग करना चाहता हूं ताकि अपडेट प्रत्येक शैली को व्यक्तिगत रूप से प्रत्येक शैली को अपडेट करने की आवश्यकता के बिना प्रचारित हो जाएंगे।

कुछ इस तरह:

// Variables.js 

var fontSizeMedium = 16px; 

// Section.js 

const Section = styled.section` 
    font-size: ${fontSizeMedium}; 
`; 

// Button.js 

const Button = styled.button` 
    font-size: ${fontSizeMedium}; 
`; 

// Label.js 

const Label = styled.span` 
    font-size: ${fontSizeMedium}; 
`; 

मुझे लगता है मैं हालांकि वाक्य रचना गलत हो रही है? साथ ही, मुझे पता है कि जावास्क्रिप्ट भूमि में वैश्विक चर की अनुशंसा नहीं की जाती है, लेकिन डिजाइन में भूमि पुन: उपयोग करने वाली शैलियों को पूर्ण रूप से जरूरी है। यहां व्यापार-बंद क्या हैं?

Answer 1

मुझे अंत में यह पता चला, तो यहां कम से कम अगर आप इसका उपयोग कर सकते हैं, तो कम से कम यदि आप इसे कैसे कर सकते हैं।

आपको एक फ़ाइल में चर को परिभाषित करने और उन्हें निर्यात करने की आवश्यकता है।

// Variables.js 

export const FONTSIZE_5 = '20px'; 

फिर आपको प्रत्येक घटक फ़ाइल में उन चर को आयात करने की आवश्यकता है। मदद मिल सकती है

const Button = styled.button` 
    font-size: ${palette.FONTSIZE_5}; 
`; 

Answer 2

एक <ThemeProvider> आपके आवेदन के चारों ओर लपेटकर:

// Button.js 

import * as palette from './Variables.js'; 

तो फिर तुम इस तरह से अपनी स्टाइल-घटकों में चर का उपयोग कर सकते हैं

https://www.styled-components.com/docs/advanced#theming

const theme = { 
    fontColour: 'purple' 
} 

render() { 
    return (
    <ThemeProvider theme={theme}> 
     <MyApplication /> 
    </ThemeProvider> 
) 
} 

कि सभी बच्चे स्टाइल-घटकों को इस तरह की थीम तक पहुंच प्रदान करेगा:

const MyApplication = styled.section` 
    color: ${props => props.theme.fontColour} 
` 

या

const MyFancyButton = styled.button` 
    background: ${props => props.theme.fontColour} 
` 

या https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components

के माध्यम से विषय का उपयोग