Как сделать в React Vite css для каждого компонента чтобы разные были?

В React с использованием Vite вы можете создать уникальные стили для каждого компонента, чтобы они не пересекались друг с другом. Для этого вам нужно использовать CSS модули.

Во-первых, убедитесь, что у вас настроен Vite на использование CSS модулей. Это можно сделать, установив необходимые плагины и настроив vite.config.js:

// vite.config.js

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
  plugins: [reactRefresh()],
  css: {
    modules: true,
  },
});

Затем, когда вы создаете компонент в React, вам нужно будет импортировать файл стилей, используя синтаксис CSS модулей:

// MyComponent.jsx

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.container}>My Component</div>;
};

export default MyComponent;

Создайте файл стилей для компонента MyComponent:

/* MyComponent.module.css */

.container {
  background-color: lightblue;
  padding: 10px;
}

Теперь, когда вы используете компонент MyComponent в другом файле, убедитесь, что у каждого компонента есть уникальные стили, так как CSS модули автоматически генерируют уникальные имена классов для каждого компонента.

Таким образом, вы можете легко создавать и использовать уникальные стили для каждого компонента в React с помощью CSS модулей и Vite.