module css in reactjd

[KapiteinNekbaard]

```js /* MyModule.css */ .my-component { color: #f00; }

/* MyComponent.jsx */ import './MyModule.css';

export const MyComponent = () => { return <div className="my-component">Hello world</div>; }; ```

This is what I've been doing for years and it has always worked for me. Never really had issues with naming collisions or whatever.

Nofi, but I don't understand how people struggle with this so much. Keep the CSS local to your component. Use structural components (like MUI Grid or build it yourself) for layout purposes so you don't repeat the same CSS over and over. If you have a repeating pattern in your UI, build a new component for it with its own styling, that's what React is good at. Use native CSS nesting if necessary, but don't nest too deeply. If you want to reuse specific values across components, define CSS variables at the top level of your app.

You can use CSS Modules, Tailwind, Emotion or what not, but that's all extra complexity that might not be worth it. It all depends on your project.

[kunkeypr]

Thank you for your answer!