วิธีเพิ่มหลายคลาสใน UI วัสดุโดยใช้อุปกรณ์ประกอบฉาก

การใช้เมธอด css-in-js เพื่อเพิ่มคลาสให้กับคอมโพเนนต์การตอบสนองฉันจะเพิ่มคอมโพเนนต์หลายรายการได้อย่างไร

นี่คือตัวแปรคลาส:

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

นี่คือวิธีที่ฉันใช้:

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

ข้างต้นใช้งานได้ แต่มีวิธีเพิ่มทั้งสองคลาสโดยไม่ใช้classNamesแพ็คเกจ npm หรือไม่? สิ่งที่ต้องการ:

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

คุณสามารถใช้การแก้ไขสตริง:

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

คุณสามารถติดตั้งแพ็คเกจนี้ได้

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'

คุณสามารถใช้clsx ฉันสังเกตเห็นว่ามันใช้ในตัวอย่างปุ่ม MUI

ติดตั้งครั้งแรก:

npm install --save clsx

จากนั้นนำเข้าในไฟล์คอมโพเนนต์ของคุณ:

import clsx from 'clsx';

จากนั้นใช้ฟังก์ชันที่นำเข้าในส่วนประกอบของคุณ:

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

หากต้องการใช้หลายคลาสกับคอมโพเนนต์ให้รวมคลาสที่คุณต้องการใช้ภายใน classNames

ตัวอย่างเช่นในสถานการณ์ของคุณรหัสของคุณควรมีลักษณะเช่นนี้

import classNames from 'classnames';

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

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

ตรวจสอบให้แน่ใจว่าคุณนำเข้า classNames !!!

ดูเอกสาร UI วัสดุที่พวกเขาใช้หลายคลาสในองค์ประกอบเดียวเพื่อสร้างปุ่มที่กำหนดเอง

คุณยังสามารถใช้คุณสมบัติการขยาย ( ปลั๊กอิน jss-expandถูกเปิดใช้งานโดยค่าเริ่มต้น):

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

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

ฉันคิดว่านี่จะช่วยแก้ปัญหาของคุณได้:

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

และในองค์ประกอบปฏิกิริยา:

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

ใช่ jss-composes ให้สิ่งนี้แก่คุณ:

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

จากนั้นคุณก็ใช้ class.spacious

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'

คุณสามารถเพิ่มคลาสสตริงและคลาสตัวแปรหรือคลาสอุปกรณ์ประกอบฉากได้พร้อมกันด้วยวิธีนี้

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

สามชั้นเรียนในเวลาเดียวกัน

หากคุณต้องการกำหนดชื่อคลาสหลายชื่อให้กับองค์ประกอบของคุณคุณสามารถใช้อาร์เรย์ใช้อาร์เรย์

ดังนั้นในโค้ดของคุณด้านบนหาก this.props.classes แก้ไขเป็น ['container', 'spacious'] นั่นคือ if

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

คุณสามารถกำหนดให้ div เป็น

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

และผลลัพธ์จะเป็น

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

ดังที่ได้กล่าวไปแล้วคุณสามารถใช้การแก้ไขสตริงได้

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

และคุณสามารถลองใช้classnamesห้องสมุด https://www.npmjs.com/package/classnames