You can use the following logic with config file for any pages. Also, You can send config data from remote server (req/res API) and handle with redux.

See Demo: CodeSandBox

create components directory and create files like below:

src
 |---components
      |---Button
      |     |---Button.jsx
      |     |---Button.module.css

Button Component:

// Button.jsx

import React from "react";
import styles from "./Button.module.css";

const Button = props => {
  const { children, className, ...otherProps } = props;
  return (
    <button className={styles[`${className}`]} {...otherProps}>
      {children}
    </button>
  );
};

export default Button;

...

// Button.module.css

.Home_btn {
  background: red;
}
.About_btn {
  background: blue;
}

create utils directory and create AppUtils.js file:

This file handle config files of pages and return new object

class AppUtils {
  static setRoutes(config) {
    let routes = [...config.routes];

    if (config.settings) {
      routes = routes.map(route => {
        return {
          ...route,
          settings: { ...config.settings, ...route.settings }
        };
      });
    }

    return [...routes];
  }

  static generateRoutesFromConfigs(configs) {
    let allRoutes = [];
    configs.forEach(config => {
      allRoutes = [...allRoutes, ...this.setRoutes(config)];
    });
    return allRoutes;
  }
}

export default AppUtils;

create app-configs directory and create routesConfig.jsx file:

This file lists and organizes routes.

import React from "react";

import AppUtils from "../utils/AppUtils";
import { pagesConfig } from "../pages/pagesConfig";

const routeConfigs = [...pagesConfig];

const routes = [
  ...AppUtils.generateRoutesFromConfigs(routeConfigs),
  {
    component: () => <h1>404 page not found</h1>
  }
];

export default routes;

Modify index.js and App.js files to:

// index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  rootElement
);

...

react-router-config: Static route configuration helpers for React Router.

// App.js

import React, { Suspense } from "react";
import { Switch, Link } from "react-router-dom";
import { renderRoutes } from "react-router-config";

import routes from "./app-configs/routesConfig";

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Suspense fallback={<h1>loading....</h1>}>
        <Switch>{renderRoutes(routes)}</Switch>
      </Suspense>
    </div>
  );
}

create pages directory and create files and subdirectory like below:

src
 |---pages
      |---about
      |     |---AboutPage.jsx
      |     |---AboutPageConfig.jsx
      |
      |---home
           |---HomePage.jsx
           |---HomePageConfig.jsx
      |
      |---pagesConfig.js

About Page files:

// AboutPage.jsx

import React from "react";
import Button from "../../components/Button/Button";

const AboutPage = props => {
  const btnClass = props.route.settings.layout.config.buttonClass;
  return (
    <>
      <h1>about page</h1>
      <Button className={btnClass}>about button</Button>
    </>
  );
};

export default AboutPage;

...

// AboutPageConfig.jsx

import React from "react";

export const AboutPageConfig = {
  settings: {
    layout: {
      config: {
        buttonClass: "About_btn"
      }
    }
  },
  routes: [
    {
      path: "/about",
      exact: true,
      component: React.lazy(() => import("./AboutPage"))
    }
  ]
};

Home Page files:

// HomePage.jsx

import React from "react";
import Button from "../../components/Button/Button";

const HomePage = props => {
  const btnClass = props.route.settings.layout.config.buttonClass;
  return (
    <>
      <h1>home page</h1>
      <Button className={btnClass}>home button</Button>
    </>
  );
};

export default HomePage;

...

// HomePageConfig.jsx

import React from "react";

export const HomePageConfig = {
  settings: {
    layout: {
      config: {
        buttonClass: "Home_btn"
      }
    }
  },
  routes: [
    {
      path: "/",
      exact: true,
      component: React.lazy(() => import("./HomePage"))
    }
  ]
};

...

// pagesConfig.js

import { HomePageConfig } from "./home/HomePageConfig";
import { AboutPageConfig } from "./about/AboutPageConfig";

export const pagesConfig = [HomePageConfig, AboutPageConfig];

Edited section: With HOC Maybe this way: CodeSandBox

create hoc dir and withPage.jsx file:

src
 |---hoc
      |---withPage.jsx

...

// withPage.jsx

import React, { useEffect, useState } from "react";

export function withPage(Component, path) {
  function loadComponentFromPath(path, setStyles) {
     import(path).then(component => setStyles(component.default));
   }
  return function(props) {
    const [styles, setStyles] = useState();
    
    useEffect(() => {
      loadComponentFromPath(`../pages/${path}`, setStyles);
    }, []);
    return <Component {...props} styles={styles} />;
  };
}

And then pages like below:

src
 |---pages
      |---about
      |     |---About.jsx
      |     |---About.module.css
      |
      |---home
           |---Home.jsx
           |---Home.module.css

About.jsx file:

// About.jsx

import React from "react";
import { withPage } from "../../hoc/withPage";

const About = props => {
  const {styles} = props;
  return (
    <button className={styles && styles.AboutBtn}>About</button>
  );
};

export default withPage(About, "about/About.module.css");

About.module.css file:

// About.module.css

.AboutBtn {
  background: yellow;
}

Home.jsx file:

// Home.jsx

import React from "react";
import { withPage } from "../../hoc/withPage";

const Home = props => {
  const { styles } = props;
  return <button className={styles && styles.HomeBtn}>Home</button>;
};

export default withPage(Home, "home/Home.module.css");

Home.module.css file:

// Home.module.css

.HomeBtn {
  background: red;
}

I would suggest instead of adding both the default styles and the consumer styles, use the consumer's styles over yours and use your as a callback if not supplied. The consumer can still compose your defaults with the composes keyword.

Button.js

import React from 'react';
import styles from './Button.module.scss';

const Button = ({ children, className}) => (
    <button className={className ?? styles.btn}>{children}</button>
);

export default Button;

SomePage.module.scss

.pageBtn {
  // First some defaults
  composes: btn from './Button.module.scss';
  // And override some of the defautls here
  background: yellow;
}

If you wish, use sass @extends or @mixin instead

EDIT: Haven't tested it, but could it be that just by using composes webpack will make sure to bundle the defaults only once? Thus you're no longer needed to change your Button.js code with the ??

Solution 1

I know this is very obvious, but would work anyway:

Set !important on your overwriting css rules, thus bypassing specificity:

[PageName].module.scss:

.btn {
  color: yellow !important;
}

However, most of the strict devs I know would avoid this keyword at all cost.

Why ? Because when you start to have a lot of !important your css is a nightmare to debug. If you start writing !important rules with higher specificity, you know you have gone too far

It is only meant for corner-cases like yours, you might as well use it.

Solution 2

fix CRA config to enforce style tags order.

It is open-source after all :)

You can give your input on this bug here (upvote might give it more visibility):

https://github.com/facebook/create-react-app/issues/7190

Solution 3 (Update)

You could create a SCSS mixin in a new customButton.scss file, to generate css rules with higher specificity:

// customButton.scss
@mixin customBtn() {
  :global {
    .customBtn.override {
      @content;
    }
  }
}

We will use two static class names (using the :global selector), because that way their name won't change based on where they are imported from.

Now use that mixin in your pages' SCSS:

// [pageName].module.scss
@import 'customButton.scss';

@include customBtn {
  color: yellow;
}

css output should be:

.customBtn.override {
  // put everything you want to customize here
  color: yellow;
}

In Button.jsx: apply both class names to your button in addition to styles.btn:

// Button.jsx
const Button = ({ children, className = '' }) => (
    <button className={`${styles.btn} customBtn override ${className}`}>
      {children}
    </button>
);

(Note that these are not referenced through the styles object, but the classname directly)

The main drawback is these are not dynamic class names, so you have to watch out to avoid conflicts yourself like we use to do before. But I think it should do the trick