por Do you know how to load CSS from a React component? In programming, the process of styling is essential to make an application or web page different from others. Besides, Styling an app is important for its usability. It’s not enough for a button to be well made, it’s also important that the user knows how to use it with style keys.
In React, there are many ways to style an application, from handling CSS directly or using a library like styled components until inserting the label style inside our code. In this post, we will teach you how to load css from a react component so you can apply CSS properties in your JavaScript application.
A little context
Suppose we have a component called TweetsPage, to which we have given a class name «tweetsPage». So, as we learned in our post about styles in React, we can use this class name to style our component. To do this, we have created a CSS file at the same level as our JavaScript component, within which we have written the following lines of style code:
.tweetsPage {
background-color: lightblue;
}
Now, we have this CSS file with the style properties that we want to add to our component. However, The properties will not take effect until we do the process of loading CSS from a React component.
How to load CSS from a React component?
To load CSS from a React component, we use webpack. With webpack and its loaders we can do import of CSS files in react from JavaScript. That is, we can not only import .js files and their components, but we can also import files of other types.
So, to load CSS from a component in React, we will have to go to the file where we have our component and insert file import CSS in react in the first lines of code. For this import we use the keyword import and then the access guide to the CSS in react file that we want to insert. In our case, this looks like this:
import ‘./TweetsPage.css’;
The previous line of code allows us to do a import inside our file js so that when webpack loops through all the imports of our project, know to upload this file CSS in react to create a final CSS file in react.
To make sure this import is working, we suggest having your server open localhost and see the changes. If you are managing an application created with create-react-app, You should see the change on the website automatically. In our case, we will see that the background of our text is now a light blue color from the style set in react. You can also explore this in the styles panel of your web inspector. There you will see the class that you have defined and the style property in react applied.
Keep in mind that the ability to style a React app using CSS is not a feature of React. That is, what React really does is allow us to declare a class with the tag className. The fact that we can import a CSS file in react into a JS is an action completely specific to webpack.
Don’t know how to install webpack? Don’t worry! When creating an app with create-react-app, all of this configuration is done automatically and internally, so you don’t have to create it manually. All you have to do is load CSS from a component of style in react. If you don’t, it’s like the CSS file is isolated from your project. That is, it would not be taken into account by the program or by webpack when browsing the files from the index.
What is the next step?
By reading this post you have not only learned how to load CSS from a React component, but You have also come closer to mastering this powerful programming library. Now, the next step is to dedicate yourself completely to your learning. To do this, we invite you to our Full Stack Web Development Bootcamp, an intensive training program where you will learn to master programming tools and languages for the web such as React, HTML, CSS and JavaScript. Dare to take the next step and sign up to stand out in the IT sector!