CSS in JS

The’react-jss’ integrates JSS with react app to style components. It helps to write CSS with Javascript and allows us to describe styles in a more descriptive way. It uses javascript objects to describe styles in a declarative way using ‘createUseStyles’ method of react-jss and incorporate those styles in functional components using className attribute.

Step to Install required Module: install third-party react-jss package using the below command in terminal

npm i react-jss

Example : This example demonstrate the use of react-jss library to add style to react components.

Javascript

// Filename - App.js
 
import React, { Component } from "react";
import StudentList from "./StudentList";
 
const App = () => {
    return (
        <div>
            <StudentList
                name="Ashank"
                classNo="X"
                roll="05"
                addr="Kolkata, West Bengal"
            />
            <StudentList
                name="Samir"
                classNo="Xi"
                roll="09"
                addr="Jalpaiguri, West Bengal"
            />
            <StudentList
                name="Tusar"
                classNo="Xii"
                roll="02"
                addr="Howrah, West Bengal"
            />
            <StudentList
                name="Karishma"
                classNo="ix"
                roll="08"
                addr="Mednipur, West Bengal"
            />
        </div>
    );
};
 
export default App;

Javascript

// Filename - App.js
 
import React, { Component } from "react";
import { createUseStyles } from "react-jss";
 
const styles = createUseStyles({
    student: {
        border: "2px solid green",
        width: "40%",
        listStyleType: "none",
    },
 
    studentDetails: {
        color: "blue",
        fontSize: "23px",
    },
});
 
const StudentList = (props) => {
    const classes = styles();
    const { name, classNo, roll, addr } = props;
    return (
        <ul className={classes.student}>
            <li className={classes.studentDetails}>
                Name : {name}
            </li>
            <li className={classes.studentDetails}>
                Class: {classNo}
            </li>
            <li className={classes.studentDetails}>
                Roll: {roll}
            </li>
            <li className={classes.studentDetails}>
                Address : {addr}
            </li>
        </ul>
    );
};
 
export default StudentList;

Output:

Styling with CSS in JS

Styled Components: The styled-components allows us to style the CSS under the variable created in JavaScript. style components is a third party package using which we can create a component as a JavaScript variable that is already styled with CSS code and used that styled component in our main component. styled-components allow us to create custom reusable components which can be less of a hassle to maintain.

Step to Install required Module: install third-party styled-components package using the below command in terminal.

npm i --save styled-components

Example: This example use styled-cpmponents to create react components.

Javascript

// Filename - App.js
 
import React, { Component } from "react";
import StudentList from "./StudentList";
 
const App = () => {
    return (
        <div>
            <StudentList
                name="Ashank"
                classNo="X"
                roll="05"
                addr="Kolkata, West Bengal"
            />
            <StudentList
                name="Samir"
                classNo="Xi"
                roll="09"
                addr="Jalpaiguri, West Bengal"
            />
            <StudentList
                name="Tusar"
                classNo="Xii"
                roll="02"
                addr="Howrah, West Bengal"
            />
            <StudentList
                name="Karishma"
                classNo="ix"
                roll="08"
                addr="Mednipur, West Bengal"
            />
        </div>
    );
};
 
export default App;

Javascript

// Filename - StudentList.js
 
import React, { Component } from "react";
import styled from "styled-components";
 
//styled component Li
const Li = styled.li`
    color: blue;
    font-size: 23px;
`;
 
//Styled component Ul
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;

Output :

Styling with styled components

8 Ways to Style React Components

React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

There are about eight different ways to style React JS components, there names and explanations of some of them are mentioned below.

Inline CSS
Normal CSS
CSS in JS
Styled Components
CSS module
Sass & SCSS
Less
Stylable

Here are a few examples to style React Components.

Table of Content

Inline CSS
Normal CSS
CSS in JS
CSS Modules
Sass and SCSS

Tags:

#ReactJS #Web Technologies

Normal CSS:

CSS Modules:

CSS in JS

Javascript

Javascript

Javascript

Javascript

8 Ways to Style React Components

Similar Reads

Contact Us