使用 React 片段将内联 CSS 添加到 JS class

Question

I was following this article https://prawira.medium.com/react-conditional-import-conditional-css-import-110cc58e0da6 to conditionally lazy-load CSS stylings in my React app. The method described involves creating a dummy JS class, eg.

import React from 'react';
import './my-styles.css';

const Theme = () => (<React.Fragment></React.Fragment>);

export default Theme;

So that it can be used like this:

const styles = React.lazy(() => import("./theme"))
...
return (
<>
   <Suspense fallback={<></>}>
      {styles}
   </Suspense>
   <MyApp />
</>
);

I will need to be able to lazy load many CSS stylesheets, and I don't want to create the same JS wrapper over and over again for each one. Is there a way to combine the wrapper with inline CSS, or perhaps make one wrapper for all of the styles (such that the lazy-loading process still only loads the specific one I want?)

Answer 1

You should create a theme that will decide what styles have to be loaded as in the article you are refferring to:

const ThemeSelector = ({ children }) => {
  const CHOSEN_THEME = localStorage.getItem('TYPE_OF_THEME') || TYPE_OF_THEME.DEFAULT;
  return (
    <>
      <React.Suspense fallback={<></>}>
        {(CHOSEN_THEME === TYPE_OF_THEME.LIGHT_MODE) && <LightTheme />}
        {(CHOSEN_THEME === TYPE_OF_THEME.DARK_MODE) && <DarkTheme />}
      </React.Suspense>
      {children}
    </>
  )
}

In the expample you show there is no condition, by the way. It always loads './my-styles.css'