Как добавить css в react

Существует несколько способов добавления CSS в React, вот некоторые из них:

Импорт стилей в компоненты

Создайте файл стилей с расширением .css и определите стили, которые вы хотите применить к компоненту. Затем импортируйте созданный файл CSS в соответствующий компонент.

import './styles.css';

function MyComponent() {
  return (
    <div className="my-component">
      {/* содержимое компонента */}
    </div>
  );
}

Использование инлайн стилей

Вы можете использовать объект JavaScript для определения свойств CSS и их значений, затем передать объект как атрибут style компонента React.

function MyComponent() {
  const styles = {
    color: 'red',
    backgroundColor: 'lightgray',
    fontSize: '16px',
  };

  return (
    <div style={styles}>
      {/* содержимое компонента */}
    </div>
  );
}

Использование CSS-модулей

Создайте файл стилей с расширением .module.css, который будет содержать локальные имена классов для каждого компонента. Затем импортируйте созданный файл CSS и используйте локальные имена классов, когда определяете класс компонента.

import styles from './styles.module.css';

function MyComponent() {
  return (
    <div className={styles.myComponent}>
      {/* содержимое компонента */}
    </div>
  );
}

Использование CSS-встроенных стилей

Этот метод не очень популярен, но он также может быть использован. Вы можете создать строку со стилями и передать ее в качестве атрибута style компонента.

function MyComponent() {
  const styles = `
    color: red;
    background-color: lightgray;
    font-size: 16px;
  `;

  return (
    <div style={{ cssText: styles }}>
      {/* содержимое компонента */}
    </div>
  );
}

В зависимости от ваших предпочтений и требований используйте любой из вышеперечисленных методов для добавления CSS в ваш проект React.