सामग्री समूह का उपयोग करके सामग्री UI में कई कक्षाएं कैसे जोड़ें

Question

एक प्रतिक्रिया घटक में कक्षाएं जोड़ने के लिए सीएसएस-इन-जेएस पद्धति का उपयोग करते हुए, मैं कई घटकों को कैसे जोड़ूं?

यहाँ वर्गों चर है:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

यहाँ है कि मैं इसे कैसे इस्तेमाल किया:

    return (
     <div className={ this.props.classes.container }>

उपरोक्त काम करता है, लेकिन क्या classNamesnpm पैकेज का उपयोग किए बिना, दोनों वर्गों को जोड़ने का एक तरीका है ? कुछ इस तरह:

     <div className={ this.props.classes.container + this.props.classes.spacious}>

Comments

शायद मुझे कुछ याद आ रहा है, लेकिन क्या आप अभी नहीं कर सकते हैं <div className = "कंटेनर विशाल"> आपको इसे संपत्ति के रूप में पारित करने की आवश्यकता क्यों है?

— सिंह किसान

आप केवल दो वर्ग नामों के बीच एक स्थान याद कर रहे हैं।

— शनीमल

हाँ जैसा कि ऊपर कहा गया है, आपको बस बीच में एक जगह के साथ कक्षाओं को सही ढंग से समतल करने की आवश्यकता है! किसी भी अतिरिक्त पैकेज के लिए कोई ज़रूरत नहीं है।

— टेलर ए। लीच

Answer 1

आप स्ट्रिंग प्रक्षेप का उपयोग कर सकते हैं:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

Comments

और याद रखें कि कक्षाओं के बीच अल्पविराम न जोड़ें! मैंने गलती से किया था और पहले वाले ने थोड़ी देर तक ध्यान दिए बिना चुपचाप तोड़ दिया

— Pere

और कक्षाओं के बीच एक जगह होनी चाहिए

— योएल

Answer 2

आप इस पैकेज को स्थापित कर सकते हैं

https://github.com/JedWatson/classnames

और फिर इसे इस तरह से उपयोग करें

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

Comments

यह दृष्टिकोण सामग्री-यूआई उनके कुछ उदाहरणों में उपयोग करता है, और अच्छी तरह से काम करता है इसलिए मैं इसकी सिफारिश करूंगा।

— क्रेग माइल्स

यह स्वीकृत उत्तर होना चाहिए। उम्मीद के

— मुताबिक

इस दृष्टिकोण का उपयोग कर रहा है। उपयोगी न केवल कई वर्गनाम रखने के लिए बल्कि इसे सशर्त बनाने के लिए भी उपयोगी है।

— माउथज़िपर

@material-ui/coreअब इस पर निर्भर करता है clsx, इसलिए यदि आप अपने बंडल के आकार को बढ़ाना नहीं चाहते हैं, तो आप इसके बजाय - npmjs.com/package/clsx

— Wayne Bloss

Answer 3

आप clsx का उपयोग कर सकते हैं । मैंने देखा कि यह MUI बटन उदाहरणों में उपयोग किया गया था

पहले इसे स्थापित करें:

npm install --save clsx

फिर इसे अपनी घटक फ़ाइल में आयात करें:

import clsx from 'clsx';

फिर अपने घटक में आयातित फ़ंक्शन का उपयोग करें:

<div className={ clsx(classes.container, classes.spacious)}>

Comments

clsxपैकेज की तुलना में छोटा है classnames, इसलिए मैं इस समाधान को पसंद करता हूं

— Hoang Trinh

clsx को यूआई में शामिल किया गया है, इसलिए यह

— क्लासनेम की

मिनी के कम-इष्टतम उत्तर के नीचे प्रति वेन ब्लास की टिप्पणी @material-ui/core now depends on clsx, so if you don't want to increase your bundle size you'll want to use that instead:। तो, इस उत्तर के लिए +1।

— cssyphus 16

Answer 4

एक घटक पर कई कक्षाएं लागू करने के लिए, उन कक्षाओं को लपेटें जिन्हें आप क्लासनेम में लागू करना चाहते हैं।

उदाहरण के लिए, आपकी स्थिति में, आपका कोड इस तरह दिखना चाहिए,

import classNames from 'classnames';

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  spacious: {
    padding: 10
  }
});

<div className={classNames(classes.container, classes.spacious)} />

सुनिश्चित करें कि आप classNames आयात करते हैं !!!

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

Answer 5

आप विस्तार संपत्ति का उपयोग भी कर सकते हैं ( डिफ़ॉल्ट रूप से jss- विस्तार प्लगइन सक्षम है):

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  spaciousContainer: {
    extend: 'container',
    padding: 10
  },
});

// ...
<div className={ this.props.classes.spaciousContainer }>

Comments

दुर्भाग्य से, अब डिफ़ॉल्ट रूप से सक्षम नहीं है ... यहां

— ईगार्डस

Answer 6

मुझे लगता है कि इससे आपकी समस्या दूर हो जाएगी:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

और प्रतिक्रिया घटक:

<div className={`${classes.container} ${classes.spacious}`}>

Answer 7

हाँ, jss-composes आपको यह प्रदान करता है:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  composes: '$container',
  padding: 10
},
});

और फिर आप केवल classes.spacious का उपयोग करें।

Comments

रचना का उपयोग करते हुए कई क्लासनाम का उपयोग करते समय, यह काम नहीं करता है। codeandbox.io/s/practical-cohen-l6qt5?file=/src/text.js

— user970780

Answer 8

classNames पैकेज के रूप में भी इस्तेमाल किया जा सकता है:

import classNames from 'classnames';

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true }); // => 'btn-primary'

Comments

शो त्रुटि वेबपैक बिल्ड: मॉड्यूल नहीं मिला: त्रुटि: 'क्लासनामेस' को हल नहीं कर सकते

— प्रणय सोनी

Answer 9

आप एक ही समय में कई स्ट्रिंग क्लासेस और वैरिएबल क्लास या प्रॉप्स क्लास को इस तरह से जोड़ सकते हैं

className={`${classes.myClass}  ${this.props.classes.myClass2} MyStringClass`}

एक ही समय में तीन कक्षाएं

Answer 10

यदि आप अपने तत्व में कई वर्ग के नाम निर्दिष्ट करना चाहते हैं , तो आप सरणियों का उपयोग कर सकते हैं ।

तो ऊपर दिए गए आपके कोड में, यदि यह। Props.classes कुछ हल करता है जैसे कि '' कंटेनर ',' विशाल '], यानी यदि

this.props.classes = ['container', 'spacious'];

आप बस इसे div के रूप में असाइन कर सकते हैं

<div className = { this.props.classes.join(' ') }></div>

और परिणाम होगा

<div class='container spacious'></div>

Comments

क्या आप सुनिश्चित हैं कि ,परिणाम में अलग-अलग नाम हैं

— परदीप जैन

निश्चित नहीं है कि यह स्वीकृत उत्तर क्यों है, @ गलबेर रामोस सही है, मटेरियल यूआई उस तरह काम नहीं करता है।

— टिमोटल 11

Answer 11

जैसा कि पहले ही उल्लेख किया गया है, आप स्ट्रिंग प्रक्षेप का उपयोग कर सकते हैं

className={`${this.props.classes.container}  ${this.props.classes.spacious}`}

और आप classnamesपुस्तकालय, https://www.npmjs.com/package/classnames की कोशिश कर सकते हैं

Comments

आपके उत्तर के दोनों हिस्से पहले अन्य सदस्यों द्वारा प्रदान किए गए थे। आप सभी ने उन्हें एक ही उत्तर में दोहराना था। -1 (सुझाव है कि आप इस उत्तर को हटा दें और अपने 2 प्रयास को पुनर्प्राप्त करें)

— cssyphus 16