Как передать условие классов в компонент с помощью JSS?

Когда мы работаем с React компонентами и используем JSS (JavaScript Style Sheets), можно передать условие классов в компонент двумя способами: с помощью условного оператора if-else или использованием функции классового компонента.

Первый способ - использование условного оператора if-else. Мы можем объявить переменную, которая будет содержать классы в зависимости от условия, и затем передать эту переменную как значение атрибута className компонента.

Вот пример кода:

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: 'red',
    padding: '10px',
  },
  primaryButton: {
    backgroundColor: 'blue',
    color: 'white',
  },
});

const MyComponent = ({ isPrimary }) => {
  const classes = useStyles();

  let buttonClass = classes.button;
  if (isPrimary) {
    buttonClass = `${buttonClass} ${classes.primaryButton}`;
  }

  return <button className={buttonClass}>My Button</button>;
};

export default MyComponent;

В этом примере мы создали два класса стилей с помощью JSS: button и primaryButton. Если isPrimary равно true, то мы добавляем класс primaryButton к переменной buttonClass, которая передается в качестве className компонента кнопки.

Второй способ - использование функции классового компонента. Мы можем добавить условие в функцию классового компонента, чтобы возвращать различное значение для className в зависимости от условия.

Вот пример кода:

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: 'red',
    padding: '10px',
  },
  primaryButton: {
    backgroundColor: 'blue',
    color: 'white',
  },
});

const MyComponent = ({ isPrimary }) => {
  const classes = useStyles();

  return <button className={`${classes.button} ${isPrimary ? classes.primaryButton : ''}`}>My Button</button>;
};

export default MyComponent;

В этом примере мы определили функцию классового компонента MyComponent и использовали условие для определения значения className. Если isPrimary равно true, то мы добавляем класс primaryButton к className кнопки, иначе передаем только класс button.

Оба способа предоставляют возможность передать условие классов в компонент с помощью JSS в React. Вы можете выбрать наиболее удобный вариант для вашего проекта в зависимости от предпочтений и требований.