Material-UI — это популярная библиотека компонентов React, которая предоставляет набор готовых к использованию компонентов пользовательского интерфейса, соответствующих рекомендациям Material Design. Одним из распространенных требований в веб-разработке является применение нескольких классов CSS к одному элементу. В этой статье мы рассмотрим различные методы достижения стиля двойного класса в Material-UI, сопровождаемые разговорными объяснениями и примерами кода.

Метод 1: использование утилиты classNames
Material-UI предоставляет служебную функцию classNames, которая полезна для условного применения нескольких классов к элементу. Эта функция принимает объект, ключами которого являются имена классов, а значениями — логические выражения, определяющие, следует ли применять каждый класс. Давайте рассмотрим пример:

import { classNames } from '@mui/styles';
const DoubleClassComponent = ({ isPrimary, isHighlighted }) => {
  const classes = classNames({
    primary: isPrimary,
    highlighted: isHighlighted,
  });
  return <div className={classes}>Double Class Styling</div>;
};

В этом примере класс primaryбудет применяться, когда isPrimaryравен true, а класс highlightedбудет применено, когда isHighlightedравно true.

Метод 2: использование литералов шаблона
Если вы предпочитаете более краткий синтаксис, вы можете использовать литералы шаблона для динамического объединения имен классов. Вот пример:

const DoubleClassComponent = ({ isPrimary, isHighlighted }) => {
  const classes = `double-class ${isPrimary ? 'primary' : ''} ${isHighlighted ? 'highlighted' : ''}`;
  return <div className={classes}>Double Class Styling</div>;
};

В этом примере класс double-classбудет применяться всегда, а primaryи highlightedбудут добавлены условно на основе значений isPrimaryи isHighlighted.

Метод 3: библиотеки CSS-in-JS
Другой популярный подход — использовать библиотеки CSS-in-JS, такие как styled-comments или Emotion, вместе с Material-UI. Эти библиотеки позволяют определять стили непосредственно в коде JavaScript и легко применять несколько классов. Вот пример использования стилевых компонентов:

import styled from 'styled-components';
const StyledDoubleClassComponent = styled.div`
  &.primary {
    /* Styles for primary class */
  }
  &.highlighted {
    /* Styles for highlighted class */
  }
`;
const DoubleClassComponent = ({ isPrimary, isHighlighted }) => {
  return (
    <StyledDoubleClassComponent className={`${isPrimary ? 'primary' : ''} ${isHighlighted ? 'highlighted' : ''}`}>
      Double Class Styling
    </StyledDoubleClassComponent>
  );
};

В этом примере мы определяем стилизованный компонент и используем свойство classNameдля условного применения классов primaryи highlighted.

В этой статье мы рассмотрели несколько методов достижения стиля двойного класса в Material-UI. Мы рассмотрели утилиту classNames, литералы шаблонов и использование библиотек CSS-in-JS, таких как styled-comments. У каждого метода есть свои преимущества, поэтому выберите тот, который соответствует требованиям вашего проекта и стилю кодирования. Имея в своем распоряжении эти методы, вы сможете гибко стилизовать компоненты Material-UI так, как захотите.