मेरे कार्यात्मक घटक के शीर्ष पर, ये मान सेट हैं जो केवल शैलियों में उपयोग नहीं किए जाते हैं, और यही मुझे परेशान कर रहा है:

const testWidth = 100;
const testHeight = 100;

मैं अपनी शैलियों में उनमें से कुछ चर का उपयोग करता हूं ...

मैं अपनी शैलियों को दूसरी फ़ाइल में स्थानांतरित करना चाहता हूं जो इस स्टाइल को धारण करेगी और उदाहरण के लिए कुछ वर्ग नाम से संबंधित होगी। divWrapperStyle' लेकिन मुझे यकीन नहीं है कि मैं इस चर के साथ कैसे बातचीत कर सकता हूं 'testWidth'

<div
style={{
  borderBottom: 0,
  width: `${testWidth}px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}}
>

तो मैं बाहरी .scc फ़ाइल में कुछ इस तरह बना सकता हूं:

.wrapper{
    borderBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    paddingTop: 20,
 }

और मैं उस फ़ाइल को आयात करने के बाद कुछ इस तरह उपयोग कर सकता हूं:

 <div className="wrapper> 

लेकिन चौड़ाई के बारे में क्या? मैं testWidth चर से उस मान के साथ चौड़ाई कैसे शामिल कर सकता हूं ...?

ताकि सीएसएस में उपयोग किए जाने वाले चर मेरे लिए समस्याग्रस्त हों: /

इससे कैसे निपटें?

धन्यवाद

5
Roxy'Pro 21 सितंबर 2019, 20:25

3 जवाब

सबसे बढ़िया उत्तर

आप केवल एक .JS फ़ाइल क्यों नहीं बनाते, उदाहरण के लिए: style.js और निम्न कार्य करें:

const testWidth = 100;
const testHeight = 100;

export default const styles = {
   divWrapperStyle: {
     borderBottom: 0,
     width: testWidth, // use your variable here
     width: 'auto',
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 20,
   }
}

और फिर अपने कार्यात्मक घटक में आप import यह कर रहे हैं:

import styles from '{pathToStyle.jsFile}';

और इसका इस्तेमाल करें:

<div style={styles.divWrapperStyle}>

मेरी राय में इसे करने का यह सबसे आसान और कारगर तरीका है। इस दृष्टिकोण से आप बाद में सब कुछ गतिशील बना सकते हैं और बाहरी पुस्तकालयों की आवश्यकता नहीं है।

1
mindmaster 21 सितंबर 2019, 20:40

मुझे नहीं लगता कि आपको किसी अन्य पुस्तकालय की आवश्यकता है। यदि आप शैली का पुन: उपयोग करना चाहते हैं तो मैं इसे एक अलग फ़ाइल में ले जाऊंगा और इसे स्थिरांक के रूप में आयात करूंगा, मानों के लिए निर्धारित डिफ़ॉल्ट मानों के साथ आपको भिन्न होने की आवश्यकता हो सकती है।

फिर यदि आपको किसी एक गुण को अपडेट करने या बदलने की आवश्यकता है तो आप इसे अपने नए मूल्य के साथ फैला सकते हैं:

// my-styles.js
export default myStyle = {
  borderBottom: 0,
  width: `10px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}

इसे इस तरह इस्तेमाल करें:

// My Component.js
import {myStyle} from ... 

<div style={{...myStyle, width: `${testWidth}px`}}>
0
Will Jenkins 21 सितंबर 2019, 20:55

styled-components लाइब्रेरी शायद आपको वह देगी जो आप चाहते हैं।

पारंपरिक सीएसएस के साथ इसे पूरा करने के लिए, मेरी सिफारिश होगी कि आप अपनी सोच को "मैं अपने सीएसएस में मनमानी संख्यात्मक मान कैसे पास करूं?", इसके बजाय, "मैं किस शैली की विविधताओं का समर्थन करना चाहता हूं?"।

यहां आपके पास wrapper--mobile, wrapper--tablet, wrapper--desktop, या शायद wrapper--wide वैरिएंट जैसा एक ही संशोधन हो सकता है। (मैं यहां BEM संकेतन का उपयोग कर रहा हूं।)

इस दूसरे दृष्टिकोण के लिए, आप आयाम गणना (मोबाइल बनाम टैबलेट) के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं, और clsx एक वर्ग नाम उत्पन्न करने के लिए जो आपके सीएसएस में समर्थन के लिए आवश्यक प्रकार को बताता है।

आपके ब्राउज़र स्टैक के आधार पर, आप संभवतः css चर. फिर भी, विचार प्रक्रिया "मैं मनमाना संख्यात्मक मान कैसे पास करूं" नहीं है, बल्कि, "मैं उन विविधताओं के सेट की घोषणा कैसे करूं, जिन्हें मुझे एक ही स्थान पर समर्थन देने की आवश्यकता है ताकि मुझे केवल एक ही स्थान पर वह परिवर्तन करने की आवश्यकता हो। भविष्य में समायोजन करने के लिए"।

मुझे बताएं कि क्या ये विकल्प आपको उस चीज़ के करीब ले जाते हैं जो आप चाहते हैं।

3
Reed Dunkle 21 सितंबर 2019, 20:39