How to add conditional CSS in create-react-app?

To add conditional CSS in create-react-app, we can load CSS files dynamically.

For instance, we write

import React from "react";

const Theme1 = React.lazy(() => import("./Theme1"));
const Theme2 = React.lazy(() => import("./Theme2"));

const ThemeSelector: React.FC = ({ children }) => (
  <>
    <React.Suspense fallback={() => null}>
      {shouldRenderTheme1 && <Theme1 />}
      {shouldRenderTheme2 && <Theme2 />}
    </React.Suspense>
    {children}
  </>
);

export default ThemeSelector;

to import the Theme1 and Theme2 CSS files with

const Theme1 = React.lazy(() => import("./Theme1"));
const Theme2 = React.lazy(() => import("./Theme2"));

Then we render Theme1 or Theme2 according to the values of shouldRenderTheme1 and shouldRenderTheme2