Когда дело доходит до стилизации компонентов React, есть несколько популярных вариантов на выбор. Два наиболее часто используемых препроцессора для стилизации в React — это SCSS (Sassy CSS) и SASS (Syntactically Awesome StyleSheets). В этой статье мы рассмотрим различные методы использования SCSS и SASS в React, а также приведем примеры кода, иллюстрирующие каждый подход.

Методы использования SCSS и SASS в React:

1. Встроенное оформление:
   React поддерживает встроенное оформление с использованием объектов JavaScript. Хотя SCSS и SASS в основном используются для написания CSS, вы все равно можете использовать их возможности, используя переменные и примеси. Вот пример:

import React from 'react';
import styles from './styles.module.scss';
const MyComponent = () => {
  const myStyle = {
    color: styles.primaryColor,
    backgroundColor: styles.secondaryColor,
  };
  return (
    <div style={myStyle}>
      <h1>Hello, World!</h1>
    </div>
  );
};
export default MyComponent;

2. Модули CSS:
   Модули CSS позволяют писать модульный CSS, генерируя уникальные имена классов для каждого компонента. При использовании SCSS или SASS с модулями CSS вы можете воспользоваться их мощными функциями. Вот пример:

/* styles.module.scss */
.primaryColor {
  color: red;
}
.secondaryColor {
  color: blue;
}

import React from 'react';
import styles from './styles.module.scss';
const MyComponent = () => {
  return (
    <div className={styles.primaryColor}>
      <h1>Hello, World!</h1>
    </div>
  );
};
export default MyComponent;

3. Библиотеки CSS-in-JS:
   Существует несколько библиотек CSS-in-JS, которые позволяют писать стили непосредственно в коде JavaScript. Хотя эти библиотеки не относятся к SCSS или SASS, они предлагают схожие функциональные возможности и могут использоваться с React. Примеры включают стилизованные компоненты, Emotion и модули CSS с модулями React CSS. Вот пример использования стилевых компонентов:

import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
  color: ${props => props.theme.primaryColor};
  background-color: ${props => props.theme.secondaryColor};
`;
const MyComponent = () => {
  return (
    <StyledDiv>
      <h1>Hello, World!</h1>
    </StyledDiv>
  );
};
export default MyComponent;

В этой статье мы рассмотрели различные методы использования SCSS и SASS в React. Мы рассмотрели встроенные стили, модули CSS и библиотеки CSS-in-JS. В зависимости от требований вашего проекта и личных предпочтений вы можете выбрать метод, который лучше всего соответствует вашим потребностям. SCSS и SASS предоставляют мощные функции для написания и организации стилей, что делает их ценными инструментами для стилизации приложений React.