How to Remove Imported CSS in Reactjs

removing an imported CSS from react and replace it with new CSS

Ok, the thing is that there are at least two different mechanisms that are contributing to the current behavior (Webpack module engine and Webpack's style-loader).

When you use Create React App, your code is bundled using Webpack which is responsible of module creation, loading and execution.

Webpack emulates NodeJS module caching strategy, so you are right, each module is only executed once (you could delete the corresponding entry from require.cache using module ID to force a module to be executed multiple times, but in your case it would pollute your <head> with new <style> tags each time you decide to load a css file. Old ones would not be removed).

In fact, style-loader converts your css code into a pseudo JavaScript module. When executed, styles are applied depending on specified options. By default, <style> tags are created.

So, this is why your code behaves like you see. When calling import(), Webpack module engine (Webpack Runtime) searches for the corresponding module (that is the __webpack_require__ thing in your update) and executes it. Then, internally, a wrapper set by style-loader inserts your styles by using <style> tags. Finally, Webpack adds the module to the cache and the next time it will not be executed again, but the latest export will be returned instead (which in this case is an object containing all your classes names).

It happens that style-loader has a feature that I think perfectly matches your use-case and it is called lazyStyleTag (see here). But you will have to change Webpack's config which is not that straightforward, specially when using Create React App.

If you need help to change Webpack's config, please let me know in the comments and I will try to guide you through the process.

However, at the end, you should be able to do something like this:

let previousStylesheet = null;

export async function importStylesheets() {
    const theme = localStorage.getItem('theme');
    const direction = localStorage.getItem('direction');

    let newStylesheet = null;

    if (theme === 'dark' && direction === 'rtl') {
        newStylesheet = await import('./css/styleDarkrtl.css');
    } else if (theme === 'dark' && direction === 'ltr') {
        newStylesheet = await import('./css/styleDarkltr.css');
    } else if (theme === 'light' && direction === 'rtl') {
        newStylesheet = await import('./css/styleLightrtl.css');
    } else if (theme === 'light' && direction === 'ltr') {
        newStylesheet = await import('./css/styleLightltr.css');
    }

    if (previousStylesheet) {
      previousStylesheet.unuse();
    }

    if (newStylesheet) {
      newStylesheet.use();
    }

    previousStylesheet = newStylesheet;
}

Your class names would be accessible like this:

import styles from './css/styleDarkrtl.css';

const elem = <div className={styles.locals['my-class']} />;

Clear imported CSS

You can accomplish that by using style-it package

Component A

class AppA extends React.Component {
  render() {
    return (
      <div>
        <Style>
          {`
            body {
              font-size: small;
              font-family: arial;
            }
            h1 {
              font-size: large;
              color: red
            }

         `}
        </Style>
        <h1> Component A this defualt style for h1 red</h1>
      </div>
    )
  }
}

Component B

class AppB extends React.Component {

  render() {
    return (
      <div>
        <Style>
          {`
            body {
              font-size: small;
              font-family: arial;
              background: #f1f1f1;
            }
            h1 {
              font-size: large;
              color: blue
            }
         `}
        </Style>
        <h1> Component B this defualt style for h1 blue</h1>
      </div>
    )
  }
}

Working Example

Edit xv40w9krnq

Using css module in react app. How can I get rid of styles keyword

Yes you can use Object destructuring.

import styles from './PlayerCard.module.css';
import PlayerPhoto from '../../images/players/Farahani.png';

const { PlayerCard: PlayerCardStyle, PlayerPhoto: PlayerPhotoStyle, PlayerName: PlayerNameStyle, SkillBox, SkillName } = styles;

export default function PlayerCard() {
  return (
    <div className={PlayerCardStyle}>
      <img className={PlayerPhotoStyle} src={PlayerPhoto} alt="Player" />
      <p className={PlayerNameStyle}>Farahani</p>

      <div className={styles.SkillBox}>
        <div className={styles.SkillName}>
          <p>Defence:</p>

Note that for PlayerCard, PlayerPhoto, and PlayerName, I need to alias it to different names so that they don't get conflicted with the components' names.

Alternatively, you can also import the styles like below:

import { PlayerCard as PlayerCardStyle, PlayerPhoto as PlayerPhotoStyle, PlayerName as PlayerNameStyle, SkillBox, SkillName } from './PlayerCard.module.css'

Similarly, you also have to alias the imports.

Is it possible to unload dynamic css imports in react?

If I understand right, then no, it's impossible, because of Webpack imported css when React compiled, anyway, you can try to css in js libs, such a Aphrodite.

How to Remove Imported CSS in Reactjs

removing an imported CSS from react and replace it with new CSS

Clear imported CSS

Using css module in react app. How can I get rid of styles keyword

Is it possible to unload dynamic css imports in react?

Related Topics

Leave a reply