Sample React component with global and modular styles

app.global.scss

// styles/app.global.scss
// import all of bootstrap into this globally scoped file
@import "~bootstrap/scss/bootstrap";

.header {
  width: 100%;
  background-color: red;
}

App.jsx

// App.jsx

import 'styles/app.global.scss'; // Import the global styles once in the top-most App component
import styles from './app.scss'; // Import modular styles for the App component

import React from 'react';
import cx from 'classnames'; // Optional classname helper library

import { Header } from './Header';

export const App = () => (
  <div className={cx('container', styles.container)}> // Apply both a global class from bootstrap and a custom modular class
    <Header />
  </div>
);

Header.jsx

// Header.jsx

import styles from './header.scss'; // Import modular styles for the Header component

import React from 'react';
import cx from 'classnames'; // Optional classname helper library

export const Header = () => (
  <header className="header">
    <button className={cx('logo', styles.logo)}> // Apply both a global class and a modular class
      {...}
    </button>
  </header>
);

header.scss

// header.scss

:global(.header) {
  background-color: red;
}

.header {
  font-size: 14px;
}