React CSS modules, inheriting from a common css module

The correct way to do this given your setup, would be to use the composes feature of CSS modules

This allows you to define a localised class rule, and import it into other localised class rules, even across files

MyCommonStyles.css

/* base button styles */
.button {
  background: #000;
  color: #fff;
} 

MyModule1.css

/* use base button styles and override the color */
.loginButton {
  composes: button from './MyCommonStyles.css';
  color: #00ff00;
}

I understand this may break the pattern of isolated components

In CSS modules land there is nothing wrong with sharing snippets of code across modules - far from it, this is built in and would be very counterproductive to prescribe recreating the same styles over and over - as long as it is not done using global CSS

For what its worth, the same can be achieved in a different way using the proposed CSS custom properties @apply, which you can use today via postcss (https://github.com/postcss/postcss-custom-properties). Either approach is totally fine, but I encourage you to try that out in combination too, to create common vars or snippets that can be shared across CSS modules. Its a great way to create components with standardised theme still using purely localised CSS

This is how I wanted it done; to each their own.

// this is the only page that should import styles this way, please use getStyles() so styles are not repeated in the header
import dig from "src/style.module.scss"


// the thought has occurred to me to put this in the DropVariables file, but getStyles of a different nature exists there, oops.
// feel free to un-clobber and move this.
export function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS): typeof dig & iCSS {
    return {
        ...dig,
        ...overrides
    }
}