CSS in React

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 the 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 can be used by many components 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 the react js we will discuss two majorly used ways one is using as the constant on the same component and another is using on separate file which can be used by many other components. 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 design, 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 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 where we will put the all 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. But there is an issue with the approach, which is supposed we want a different look for different components, then in that case, if we made any change to these components it will impact the other components also as they are also using the same css. Hence it always depends on the requirements of us how we want to use this. If we need any unique design then 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 look 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 itself as the changes are unique for the components.

Examples to Implement 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 and in the fourth example we have taken a separate file where we have written the css and that file will be available to many other files of react components. In case if we wanted 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 the react. We focus on some of the important examples of the css in the react js which revealed the flow of it.

Recommended Articles

This is a guide to CSS to React. Here we discuss an introduction to CSS in React, how to use it with programming examples. You can also go through our other related articles to learn more –

1. React Native Libraries
2. React Native Layout
3. CSS Button Border
4. CSS Attribute Selector