Updated June 16, 2023
Introduction to CSS in React
In react, js CSS can be used as any constant with all the attributes or we can create a separate file where we can put all the CSS. With the help of CSS in react js, we can design the look and feel of the components. we can design the components according to our requirements. In reacting js it gives us flexibility where we can write css for common, which means a CSS that many components can use, and we can also write unique CSS, which means we can write CSS which can be used by only one component.
How to use CSS to React?
There are multiple ways to use the css in react js. We will discuss two majorly used ways one is used as the constant on the same component, and another is used on a separate file that many other components can use. Let us discuss both the ways and benefits of them.
Writing the CSS as the constant inside components
In this approach, we define the constant, and inside the constant, we put all the important attribute designs, for example, const x ={color: red, width:20px}, and this constant will be assigned on any HTML tag as the value of the style attribute. For example, if we have Html tag div, then on <div style =x></div> . Here we have assigned the value of the x on the HTML tag div with the value of the x. With the help of this approach, we can write any css on the constant x, and the value of x can be used anywhere on the component HTML tag. Here we are getting reusability, but the issue with this approach that the css which we design here will not be used by other components, which means the value of x is limited to the current components, and we can not be able to use the x on the other components.
Writing the CSS on the separate file
In this approach, we will create a separate file for all the css logic. We need to create a class with any name like classname=”test-class” and on the file, we can put any css like .test-class{css attribute names}; in this, we can put any css. Here the main benefit of this approach is we can use this file in any component, and hence we can resume the css for any number of components. Hence it always depends on the requirements of us how we want to use this. If we need any unique design, we should use the css as the constant on the same file and if we feel that the given css will be the same for all the components, then we can put css on the separate file.
An example of the above two is if we have a button and we know that all the button looks will be the same throughout the application, then we can use a commonplace for the CSS, which is any file. In the same way, if we have the text of different purposes, then we need to write the css on the components themselves as the changes are unique for the components.
Examples of implementing CSS in React
In the below, we have given four examples of the react css; in the examples, the first three are explaining the way of uses of the css in the form of the constant, which will be available for the same file only. In the fourth example, we have taken a separate file where we have written the css. That file will be available to many other files of react components. In case we want to run these examples, then we can create a file with any name with HTML as the extension, like xss.html, and on the file, put the react javascript code section on the javascript and the HTML on the HTML section and we can see the output of the execution of the files.
Example #1
Please see the below example along with the screen of the output:
Code:
var Shape = React.createClass({
//CSS constant for the react component shape design
stylerExample: {
height: "56px",
width: "56px",
background: "red"
},
render: function() {
return (
<div style = {this.stylerExample}></div>
);
}
});
React.render(
<Shape />,
document.getElementById('main'));
Html
<div id="main"></div>Output:
Example #2
Please see the below example along with the screen of the output:
Code:
var Shape = React.createClass({
//CSS constant for the react component shape design
stylerExample: {
height: "59px",
width: "59px",
backgroundColor: "red",
borderRadius: "70%"
},
render: function() {
return (
<div style = {this.stylerExample}></div>
);
}
});
React.render(
<Shape />,
document.getElementById('main'));
Html,
<div id="main"></div>
Screen,Output:
Example #3
Please see the below example along with the screen of the output:
Code:
var Shape = React.createClass({
//CSS constant for the react component shape design
stylerExample: {
borderBottom: "56px solid red",
borderLeft: "26px solid transparent",
height: "3",
borderRight: "26px solid transparent",
width: "135px"
},
render: function() {
return (
<div style = {this.stylerExample}></div>
);
}
});
React.render(
<Shape />,
document.getElementById('main'));
Html,
<div id="main"></div>Output:
Example #4
Please see the below example along with the screen of the output:
Code:
var Shape = React.createClass({
render: function() {
return (
<div className="shape-class"></div>
);
}
});
React.render(
<Shape />,
document.getElementById('main'));
Html ,
<div id="main"></div>
CSS,
//This is the css with written on the separate file showing that other file components can also use them .
.shape-class {
border-left: 90px solid transparent;
height: 0;
border-right: 90px solid transparent;
width: 0;
border-bottom: 90px solid red;
}Output:
Conclusion
From this tutorial we learned the basic concept of the working of the react css, we learned the main uses, and the various way we can use the css in react. We focus on some of the important examples of the css in react js which revealed its flow of it.
Recommended Articles
This is a guide to CSS to React. Here we discuss an introduction to CSS in React, and how to use it with programming examples. You can also go through our other related articles to learn more –
