CODEWITHSUNDEEP
cssreactjs
i.brod
i.brod

Reputation: 4623

Is it possible to apply different global CSS rules, when a certain React component is rendered?

I'm building a project with React, that consists both of a CMS and a representation site. I've decided to combine the two into one unit, for convenience sake. I basically have two wrapper components, one for CMS and one for the representation site. To illustrate, my main router looks like that:

 <Provider store={store}>
      <Router history={history}>
        <Switch>             
          <Route path="/cms"  component={Cms} />
          <Route path="/"  component={Site} />  
        </Switch>
      </Router>  
    </Provider>

The "Cms" component will contain all CMS routes, whereas the Site one will contain the representation components.

The problem is, that i'm using some 3rd party admin template for the CMS, which ships with a giant CSS file, that contains alot of global rules: icons, fonts, buttons, etc.

This interferes with the styling of the "representation" part of the application.

Is it possible, somehow, to apply a whole css module, ONLY when a certain component is mounted? In this case, it would be the "Cms" wrapper component.

Upvotes: 0

Views: 132

Answers (2)

Robert Anderson
Robert Anderson

Reputation: 1256

The solution I have used in the past is to override the css properties from the main parent css file by creating seperate overrides files within your React application code.

If you are using Webpack, there is a plugin called the Common Chunks Plugin that you can add to your Webpack config. More info about Common Chunks Plugin

You can then assign particular css properties by choosing to import the overrides in each style chunk created from the plugin.

e.g. Class A overrides a property to be blue so imports Chunk1.sass, but class B needs the same property to have a red background so will import Chunk2.sass in its module imports.

Upvotes: 1

Kishan Mundha
Kishan Mundha

Reputation: 3141

I suggest you create both application separate, You can keep in single workspace for IDE, but keep separate startup and configuration for both site. because both site may have different look and functionality. And also both site have different security point.

So as per my understanding, If you can keep both site as separate, this will very helpful.

So make two app and host both site on same domain. You can host both site on same domain using url rewrite. This will look as single application on same domain but both application separate in your IDE. So you can manage easily.

For example:

Host your main site on https://yourdomain and cms site on https://yourdomain/cms

Upvotes: 0

Related Questions