React Key Concepts by Maximilian Schwarzmuller
How Does Styling Work in React Apps?
How can styles be added to user interface elements (such as DOM
elements) when using React?
The short answer is “just as you would to non-React apps”. You can add CSS styles and classes to JSX elements just as you would to regular HTML elements. And in your CSS code, you can use all the features and selectors you know from CSS. There are no React-specific changes you have to make when writing CSS code.
The actual CSS code and its meaning are not important. What
is important, though, is the fact that this code contains no JavaScript or React code at all. As mentioned, the CSS code you write is totally independent of the fact that you’re using React in your app.The more interesting question is how that code is actually applied to the rendered web page. How is it imported into that page?
Normally, you would expect style file imports (via ) inside of the HTML files that are being served. Since React apps are typically about building single-page applications, you only have one HTML file—the index.html file. But if you inspect that file, you won’t find any import that would point to the index.css file (only some other
element that imports a favicon), as you can see in the following screenshot:
How are the styles defined in index.css imported and applied then? You find an import statement in the root entry file (this is the main.jsx file in projects generated via Vite):
The import './index.css'; statement leads to the CSS file being imported and the defined CSS code being applied to the rendered web page.It is worth noting that this is not standard JavaScript behavior. You can’t import CSS files into JavaScript—at least not if you’re just using vanilla JavaScript.
It works in React apps because the code is transpiled before it’s loaded into the browser. Therefore, you won’t find that import statement in the final JavaScript code that’s executed in the browser. Instead, during the transpilation process, the transpiler identifies the CSS import, removes it from the JavaScript file, and injects the CSS code (or an appropriate link to the potentially bundled and optimized CSS file) into the index.html file. You can confirm this by inspecting the rendered Document Object Model (DOM) content of the loaded web page in the browser.To do so, select the Elements tab in developer tools in Chrome, as shown below:
You can define any styles you want to apply to your HTML elements (that is, to your JSX elements in your components) directly inside of the index.css file or in any other CSS files that are imported by
the index.css file.You could also add additional CSS import statements, pointing at other CSS files, to the main.jsx file or any other JavaScript files (including files that store components). However, it is important to keep in mind that CSS styles are always global. No matter whether you import a CSS file in main.jsx or in a component-specific JavaScript file, the styles defined in that CSS file will be applied globally, unless
you’re using CSS’ @scope syntax.That means that styles defined in a goal-list.css file, which may be imported in a GoalList.jsx file, could still affect JSX elements defined in a totally different component.
Author Of article : Priyadarshini Sharma Read full article
