“CSS in JS” refers to ideas on modularizing CSS , so it helps in maintaing large and medium scale applications easier.

React JS style

In React JS style attribute accepts a JavaScript object with camelCased properties.

<button style={
    { color: "blue", backgroundColor: "white" }
}>Submit</button>

Webpack css-loader and style-loader

The css-loader takes a CSS file and reads all dependencies and style-loader embeds the styles into markup.

// file name : app.css
.btn {
    color: white;
    background-color: black;
}
import './app.css';

function () {
    return (
        <button className="btn">Submit</button>
    );
}

CSS Modules

import styles from './app.css';

function () {
    return (
        <button className={styles.btn}>Submit</button>
    );
}

References: