Как добавить несколько классов в Material UI, используя реквизиты классов

Question

Используя метод 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}>

Answer 1

Если вы хотите назначить несколько имен классов для вашего элемента, вы можете использовать массивы.

Так что в вашем коде выше, если this.props.classes разрешается в нечто вроде ['container', 'acious'], т.е. если

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

Вы можете просто назначить его как div

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

и результат будет

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

Answer 2

Вы можете использовать интерполяцию строк:

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

Answer 3

Вы можете использовать clsx. Я заметил, что это используется в примерах кнопок MUI

Сначала установите его:

npm install --save clsx

Затем импортируйте его в свой файл компонента:

import clsx from 'clsx';

Затем используйте импортированную функцию в своем компоненте:

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

Answer 4

Вы можете установить этот пакет

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'

Answer 5

Чтобы применить несколько классов к компоненту, оберните классы, которые вы хотите применить, в classNames.

Например, в вашей ситуации ваш код должен выглядеть следующим образом:

import classNames from 'classnames';

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

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

Убедитесь, что вы импортируете classNames!!!

Ознакомьтесь с документацией по пользовательскому интерфейсу, в которой они используют несколько классов в одном компоненте для создания настраиваемой кнопки.

Answer 6

Вы также можете использовать свойство extend ( плагин jss-extend включен по умолчанию):

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

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

Answer 7

Таким образом вы можете одновременно добавить несколько строковых классов и классов переменных или классов свойств.

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

три класса одновременно

Answer 8

Я думаю, что это решит вашу проблему:

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

и в реактивном компоненте:

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

Answer 9

Да, jss-composes предоставляет вам это:

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

И тогда вы просто используете classes.spacious.

Answer 10

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'

Answer 11

Вы можете использовать этот метод ниже:

      import clsx from 'clsx';

 return (

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

Эта ссылка помогает.

Answer 12

Вы можете применить два класса в пользовательском интерфейсе материала, как это

      import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  spacious: {
    padding: 10,
  },
});

какой-то код

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

Как добавить два класса с помощью оператора сравнения в Material UI.

Если вы хотите использовать оператор сравнения для определения одного или двух классов, вам нужно применить

      
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  maineButton: {
   borderRadius: "10px",
   minWidth: "80px",
   border: "1x solid #dcdcdc",
  },
  selectedButton: {
    border: "1x solid #3f51b5",
  },
});

какой-то код

      const [selected, setSelected] = useState(0);

какой-то код

      {data?.map((el, index) => (
   <ButtonBase 
     className={classNames(
        classes.maineButton, 
        index === selected && classes.selectedButton
        )}
     onClick{()=> setSelected(index)}
   >
     {el.text}
   </ButtonBase>
))}

если выбрано, это даст вам два класса

      className={classNames(classes.maineButton, classes.selectedButton)}

если нет, то будет только один

      className={classNames(classes.maineButton)}

Answer 13

Это можно сделать безболезненно с деструктуризацией, в конце концов, это объекты JavaScript:

      const truncate = {
  width: '100px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};
email: {
    color: '#747474',
    ...truncate,
  },

Answer 14

Как уже упоминалось, вы можете использовать интерполяцию строк

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

И ты можешь попробовать classnamesбиблиотека, https://www.npmjs.com/package/classnames