Normal CSS

In the external CSS styling technique, we basically create an external CSS file for each component and do the required styling of classes. and use those class names inside the component. It is a convention that name of the external CSS file same as the name of the component with ‘.css’ extension. It is better if the name of the classes used, follow the format ‘componentName-context’ (here context signifies where we use this classname). For example, if we style the header of a component called ‘Box’, a better classname should style this element should be ‘Box-header’.

Example: This example illustrates how to style react components with external stylesheets.

Javascript

// Filename - StudentList.js
 
import React, { Component } from "react";
import StudentList from "./StudentList";
import "./App.css
 
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";
 
class StudentList extends Component {
    render() {
        const { name, classNo, roll, addr } = this.props;
        return (
            <ul className="StudentList">
                <li className="StudentList-details">
                    Name : {name}
                </li>
                <li className="StudentList-details">
                    Class: {classNo}
                </li>
                <li className="StudentList-details">
                    Roll: {roll}
                </li>
                <li className="StudentList-details">
                    Address : {addr}
                </li>
            </ul>
        );
    }
}
 
export default StudentList;

CSS

/* Filename: App.css */
 
.StudentList{
    border: 2px solid green;
    width: 40%:
    list-style-type: none;
    }
 
.StudentList-details{
    color: blue;
    font-size: 23px;
    }

Output:

External CSS styling

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

Inline CSS:

CSS in JS:

Normal CSS

Javascript

Javascript

CSS

8 Ways to Style React Components

Similar Reads

Contact Us