Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet
import './App.css'
Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)
:global(.myclass) {
background-color: red;
}
Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet
import './App.css'
Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)
:global(.myclass) {
background-color: red;
}
This can be done by simply adding:
require('./App.css');
(thanks @elmeister who correctly answered this question.)
Videos
Hi,
TLDR: Code at the end to see how I want to style my app. Doable approach?
I am very new to react and now I need styling. I have seen a lot of ways how people style their react app for instance:
css modules
styled components
tailwind ulitiy first
and so on...
The thing is that I dont like all of these solutions (except tailwind but I would use that on top of my styles). I dont see a reason why I should bloat my JS components with styling at all.
So my approach would be like this:
My react components just set class names like class="MyComp__wrap". Then I would style that selector "MyComp__wrap" in an external css/scss file. In my index.html I would just include that css file very early, even before the app is loaded. Just like this: "<link rel="stylesheet" href="/css/index.css">" Almost the same approach would be if I include this css file in the first react app js file (right before "ReactDOM.createRoot") like this "import './css/.index.css';" - But I dont see the reason why I should load the CSS from the react app if I can just do it in the index.html
I think its a super easy approach which does not reinvent the wheel. The components are not bloatet with styles only classNames. Furthermore it reduces complexity because the app does not even know that styling is applied. Classes wouldnt clash because of the nameing schema BEM.
I like this version a lot but of course I dont want to go down a road which is completely against all standards. What do you think?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/index.css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="/js/react-app-build.js"></script>
</body>
</html>index.js
or I would import the /css/index.css here (but I dont see a reason to do that at the moment therefore I would just stick to the index.html solution):
import './css/index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);SomeReactComp.js
const SomeReactComp = (props) => {
return (
<div className='SomeReactComp__wrap'></div>
);
}
export default SomeReactComp;css/index.css
.SomeReactComp__wrap {
backrgound: grey;
}Relatively new react dev here. I am using css modules in one of my projects. I am familiar basically with how it works, but I have a few questions when it comes to reusable code. If we have certain styles that are reused (buttons, card/container styling, h1/h2/h3... etc.), would we create a global style sheet with all of those stylings and include it in the App.js? What about if we have multiple variants of these: for example, a small button, a large button, etc? Would we have multiple classes for each of those variants in the global style sheet as well, or would we maybe have a separate style sheet called like buttons.module.css that we could include in our different components and import styles from? I guess in general I'm just confused about how to organize the styling of an entire app with css modules. If anyone has a link to a well architected, large code base that uses CSS modules that would be very helpful also, thanks!
Hey,
I set up my react project to support sass following this article, which worked out fine (I configured the webpack part slightly different though).
Since I will use a set of different colors throughout my application, I would like to store these into variables, which I can access from my components for example. Since I don't want to import my global.scss file everytime into every components .scss, I would like to somehow set the variables global, making them accessible without imports.
How could I achieve this?