Overlapping CSS in React, Webpack application

Question

I have created an application using webpack and reactjs. So far I have created 2 pages. I have defined CSS styling for both the pages. But when I load page 2 after loading page 1, the styles from page 1 are interfering with those of page 2.

For example

Page 1

require('style1.css');
var Page1 = React.createClass({
render: function(){
  return(
<div> <h1>This is Page1</h1> <span> hello from page1</span></div>
 )
}
});

module.exports = Page1;

style1.css

span {
   color : red
}

Page 2

require('style2.css');

var Page2 = React.createClass({
render: function(){
  return(
<div> <h1>This is Page2</h1> <span> hello from page2</span></div>
 )
}
});

module.exports = Page2;

style2.css

h1 {
   color : blue
}

When page2 is loaded after page1, the color of span was red, which was loaded from page1's style. Is there any way to avoid such kind of interferences or am I doing something wrong here?

Could you show us how you pass from page 1 to page 2 ? Is it with one parent component ? a router ? — Snahedis
– Snahedis, Commented Jan 26, 2016 at 18:34
Assuming it's a single page application, I'm not sure it will work the way you hope. Once it's loaded into the browser, the stylesheet doesn't simply disappear because you changed routes. — aw04
– aw04, Commented Jan 26, 2016 at 18:43
@Snahedis yes I am using react-router I didn't added the Link tag in the example. — Gilson PJ
– Gilson PJ, Commented Jan 26, 2016 at 19:02
@aw04 Yes it is a single page application. If the style sheet will not unloaded for each page what will be the best way to overcome the situation? The actual issue here is the styles from the landing page is killing my admin page style. How come I override the situation what will be the best solution any idea? Should I have to rewrite all the styles of landing page not to interfere with the new page? — Gilson PJ
– Gilson PJ, Commented Jan 26, 2016 at 19:04
Why not apply those styles to the component rather than globally? For instance, instead of a h1 {..}, do .myComponent h1 {...} — aw04
– aw04, Commented Jan 26, 2016 at 19:08

Dmitry Shvedov · Accepted Answer · 2016-01-26 20:34:49Z

2

You can have local stylesheets for each React component.

So the style sheet itself will have something like this:

:local(.styles) {

  .your-style{...}
}

You can store it in the same folder as your component code. You import the style like so:

/* component styles */
import { styles } from './styles.scss'

In the render function of your component you will have this:

return (
  <div className={styles}>
  ...
  </div>
)

Everything within that <div> will have the stylesheet applied.

Loader configuration for your Webpack:

loaders: [{
  test: /\.scss$/,
  loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
}]

You can look at this awesome boilerplate app, that implements all of this very nicely.

answered Jan 26, 2016 at 20:34

Dmitry Shvedov

3,3244 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J. Mark Stevens · Accepted Answer · 2016-01-26 18:50:36Z

1

Webpack is not going to fix the inherent problems with style sheets. If you want component level styling the simplest solution is to go with inline styles. You might also look at Radium. https://github.com/FormidableLabs/radium

answered Jan 26, 2016 at 18:50

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

1 Comment

Gilson PJ Over a year ago

So we cannot unload style sheets once it is loaded right? OK thanks Stevens I will try radium and will let you know the result.

Collectives™ on Stack Overflow

Overlapping CSS in React, Webpack application

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related