Using CSS in React

Hey readers, In this blog we will be learning about various ways in which you can style or use CSS in your React components or frontend (User Interface). Let’s start with the introduction of React. For more detail, check out React js style article. 

Introduction to React CSS component

React js is a JavaScript library used for creating interactive User Interfaces (UI) for an application. Due to the concept of reusable components, it is used to build a complex applications. It is used for designing simple views and updating states and rendering data efficiently. 

There are nine different ways to style React components:

1. Normal CSS
2. Inline CSS
3. CSS in JavaScript
4. CSS module
5. Styled components
6. Sass and SCSS
7. Aphrodite
8. Radium component
9. Emotion

Normal CSS– This is more like external CSS where we make different files and do the required styling of components with a class name. The file is created using the .css extension. The naming convention that should be followed while writing CSS is, Box-header for creating a box-like component.

Inline CSS– In inline styling, we create objects of style and render them inside a component. The style variable is used to incorporate style elements in JavaScript.

To understand this better, let’s take an example.

import React, { Component } from 'react'
class StudentList extends Component{
render(){
const {name, classNo, roll, addr} = this.props
const ulStyle = {border: '2px solid green', width:'40%', listStyleType:'none'}
const liStyle = {color : 'blue', fontSize:'23px'}
return(
<ul style={ulStyle}>
<li style={liStyle}>Name : {name}</li>
<li style={liStyle}>Class: {classNo}</li>
<li style={liStyle}>Roll: {roll}</li>
<li style={liStyle}>Address : {addr}</li>
</ul>
)
}
}
export default StudentList

CSS in JavaScript– The module ‘react-jss’ allows us to integrate CSS with React app which is JavaScript and helps conveniently describe the style. It uses objects of JavaScript to describe a style using the ‘createUseStyles’ method of ‘react-jss’ and incorporates those styles into the component using the className attribute.

For this library, install ‘react-jss’ by using the command: npm install react-jss

This third-party library helps us to integrate the styles into the JavaScript component itself.

CSS module– This is a simple CSS file that by default imports animation and class name in the CSS module and is scoped locally into the component. It follows a format in which it should be named which is ‘filename.module.css’. This allows us to use valid class names and minimize conflicts with other classes in the application.

Styled components– style-component is a third-party library that allows us to create a style using a JavaScript variable that is already styled with CSS code. It allows us to create a reusable component that makes code more efficient.

Just like react-jss, for this example, you have to install a third-party library.

Command to install the styled component module: npm install –save styled-components

import React, { Component } from 'react'
import styled from 'styled-components'
const Li = styled.li`
color : blue;
font-size : 23px 
const Ul = styled.ul`
border : 2px solid green;
width: 40%;
list-style-type:none
const StudentList = (props) => {
const {name, classNo, roll, addr} = props
return(
<Ul>
<Li>Name : {name}</Li>
<Li>Class: {classNo}</Li>
<Li>Roll: {roll}</Li>
<Li>Address : {addr}</Li>
</Ul>
)
}
export default StudentList

Sass and SCSS– It is the most powerful tool when it comes to styling elements or components. It is an updated version of CSS wherein you can add special features such as nested rules and variables. The reason why developers use this is that it makes styling simpler and more efficient.

Aphrodite– Aphrodite is a CSS in JavaScript library with 4.8k+ stars on GitHub. It is the best library used for CSS in React. It supports pseudo code with a media library to make responsive designs in React applications. The CSS is added at the time of rendering in React component application.

Command for installing: npm install –save aphrodite

Radium component– This CSS JavaScript library is used for inline styling and is a popular library with 6.9k stars on GitHub. It supports Inline styling, pseudo-code selector, media query, animation, vendor prefixing, and ES6 in React.

Command for installing: npm install -s radium in React project. 

Emotion– This CSS library is used for the front-end testing performance of React applications. It is widely used for style composition with features like labels, source maps, and testing utility. It supports both string and object styles.

Command for installing: npm install –save @emotion/core

Conclusion

These were some of the ways by which you can style your React application. Hope you liked this, if you have any queries or suggestions do let us know in the comments. For practicing the examples given above, try the playground of codedamn. If you are interested in learning React, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates.