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

Question

[evgenin]

<Routes>
    <Route element={<BackendLayout/>}>
        <Route path="/dashboard" element={<Dashboard />} />
    </Route>
    <Route element={<FrontendLayout />}>
        <Route path="/" element={<Home />} />
    </Route>
</Routes>

На front части необходимо использовать одни стили, а в dashboard клиентской части - другие. Но получается что подгружаются все css, и конфликтуют классы

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path'

export default defineConfig({
    server: {
        host: true,
        strictPort: true,
        port: 5173,
        hmr: {
            host: 'localhost',
        }
    },
    plugins: [
        laravel({
            input: [
                'resources/js/app.jsx',
            ],
            refresh: true,
        }),
        react(),
    ],
    resolve: {
        mainFields: [],
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },

});

Comments

[evgenin]

Сделал такую прослойку

<Route element={<LayoutContainer currentLayout="backend"/>}>
    <Route path="/dashboard" element={<Dashboard />} />
</Route>
<Route element={<LayoutContainer currentLayout="frontend"/>}>
    <Route path="/" element={<Home />} />
</Route>

import React, {lazy, useEffect, useState} from "react";
import FrontendLayout from "./frontend/index.jsx";
import BackendLayout from "./backend/index.jsx";

const LayoutContainer = ({ currentLayout }) => {
    const [layout, setLayout] = useState();

    useEffect(() => {
        setLayout(currentLayout);
    }, []);


    const CssLayout = () => {
        console.log('layout',layout)
        if (layout === 'backend') {
            import('../../../css/backend/index.css');
        } else if (layout === 'frontend') {
            import('../../../css/frontend/index.css');
        }
    }

    return (
        <>
            <CssLayout/>
            {layout === 'backend' ? <BackendLayout/> : <FrontendLayout/>}
        </>
    )
}

export default LayoutContainer;

Но такое себе решение

[Александр]

evgenin, посмотрите в сторону CSS modules.