ক্লাস প্রপস ব্যবহার করে কীভাবে উপাদান ইউআইতে একাধিক ক্লাস যুক্ত করা যায়

Question

প্রতিক্রিয়া উপাদানটিতে ক্লাস যুক্ত করতে CSS-in-js পদ্ধতি ব্যবহার করে, আমি কীভাবে একাধিক উপাদান যুক্ত করব?

এখানে ক্লাসগুলি পরিবর্তনশীল:

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

এখানে আমি এটি কীভাবে ব্যবহার করেছি:

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

উপরের কাজগুলি, তবে classNamesএনপিএম প্যাকেজটি ব্যবহার না করে উভয় ক্লাস যুক্ত করার কোনও উপায় আছে কি? কিছুটা এইরকম:

     <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

এবং ক্লাসের মধ্যে কমা যোগ না করা মনে রাখবেন! আমি ভুল করে করেছিলাম এবং প্রথমটি কিছুক্ষণের জন্য লক্ষ্য না করে নিঃশব্দে বিরতি দেয়

— পেরে

এবং ক্লাসগুলির মধ্যে অবশ্যই একটি স্থান থাকতে হবে

— Yoel

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

— ওয়েন ব্লস

Answer 3

আপনি ক্লক্সেক্স ব্যবহার করতে পারেন । আমি লক্ষ্য করেছি যে এটি এমইউআই বোতামের উদাহরণগুলিতে ব্যবহৃত হয়েছে

প্রথমে এটি ইনস্টল করুন:

npm install --save clsx

তারপরে এটি আপনার উপাদান ফাইলে আমদানি করুন:

import clsx from 'clsx';

তারপরে আপনার উপাদানগুলিতে আমদানি করা ফাংশনটি ব্যবহার করুন:

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

Comments

clsxপ্যাকেজটি এর চেয়ে ছোট classnames, তাই আমি এই সমাধানটি পছন্দ করি

— হোয়াং ত্রিনহ

ক্লসএক্স ম্যাটারিয়াল ইউআইতে অন্তর্ভুক্ত রয়েছে, সুতরাং এটির ক্লাসের

— নামগুলির

প্রতি মিনি এর কম অনুকূল উত্তর নিচে ওয়েন Bloss 'মন্তব্য: @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।

— সিএসফাস

Answer 4

কোনও উপাদানটিতে একাধিক ক্লাস প্রয়োগ করার জন্য, ক্লাসনামের মধ্যে আপনি যে ক্লাসগুলি প্রয়োগ করতে চান তা আবদ্ধ করুন।

উদাহরণস্বরূপ, আপনার পরিস্থিতিতে আপনার কোডটি দেখতে এমন হওয়া উচিত,

import classNames from 'classnames';

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

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

নিশ্চিত করুন যে আপনি ক্লাসের নাম আমদানি করেছেন !!!

কটাক্ষপাত আছে মেটারিয়াল UI ডকুমেন্টেশন যেখানে তারা এক উপাদান একাধিক শ্রেণীর ব্যবহার একটি কাস্টমাইজড বোতাম তৈরি করতে

Answer 5

আপনি প্রসারিত সম্পত্তিটিও ব্যবহার করতে পারেন ( জেএসএস-এক্সটেন্ড প্লাগইনটি ডিফল্টরূপে সক্ষম হয়):

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

হ্যাঁ, জেএসএস-রচনা আপনাকে এটি সরবরাহ করে:

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

এবং তারপরে আপনি কেবল ক্লাস.স্পেসিয়াস ব্যবহার করেন।

Comments

কম্পোজ ব্যবহার করে একাধিক শ্রেণিকনাম ব্যবহার করার সময় এটি কার্যকর হয় না। কোডস্যান্ডবক্স.ইও

— প্র্যাকটিক্যাল-

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

আপনি যদি আপনার উপাদানটিতে একাধিক শ্রেণীর নাম নির্ধারণ করতে চান তবে আপনি অ্যারে ব্যবহার করতে পারেন ।

সুতরাং উপরের আপনার কোডে, যদি এই.পড়েন.ক্ল্যাশস ['ধারক', 'প্রশস্ত'] এর মতো কিছু সমাধান করে, যেমন যদি

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

আপনি কেবল এটি ডিভ হিসাবে নির্ধারণ করতে পারেন

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

এবং ফলাফল হবে

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

Comments

আপনি কি নিশ্চিত যে ,ফলাফল অনুসারে পৃথক নামের ক্লাসগুলি রয়েছে

— পারদীপ জৈন

নিশ্চিত না কেন এটি গৃহীত উত্তর, @ গ্লুবার রামোস সঠিক, মেটেরিয়াল ইউআই এর মতো কাজ করে না।

— টিমোটগল

Answer 11

ইতিমধ্যে উল্লিখিত হিসাবে, আপনি স্ট্রিং ইন্টারপোলেশন ব্যবহার করতে পারেন

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

এবং আপনি classnamesলাইব্রেরি, https://www.npmjs.com/package/classnames চেষ্টা করতে পারেন

Comments

আপনার উত্তরের উভয় অংশ আগে অন্যান্য সদস্যদের দ্বারা সরবরাহ করা হয়েছিল। আপনি যা করেছিলেন তা হ'ল তাদের একক উত্তরে পুনরাবৃত্তি করা। -1 (প্রস্তাব করুন আপনি এই উত্তরটি মুছুন এবং আপনার

— 2pts