How to prevent outside CSS from adding and overriding ReactJS component styles

Question

I have a custom ReactJS component that I want to style in a certain way and provide as a plugin to many different web sites. But when web sites use global styles (Twitter bootstrap or another css framework) it adds and overrides styles of my component. For example:

global.css:

    label { 
        color: red;
        font-weight: bold;
     }

component.js:

class HelloMessage extends React.Component {
  render() {
      let style = {
          color: "green"
      };
    return (<label style={style}>Hello</label>);
  }
}

result:

Above I didn't use "font-weight: bold" in my component's style but in result my component is using it.

I'd like to be able to encapsulate my custom components's styles in a way that makes them look the same across all the web sites.

As far as I know if you don't want your element to inherit properties you're going to need to set them yourself. For example style = { color: "green" , fontWeight: "normal"} — Paran0a
– Paran0a, Commented May 24, 2016 at 9:22
If you use a css framework components will get that frameworks styling. Remove those component styles from the framework you are using — Johan Kvint
– Johan Kvint, Commented May 24, 2016 at 9:25
@Paran0a I can't foresee which properties will be in global.css or I don't know which css framework will be on a web site. — Den
– Den, Commented May 24, 2016 at 10:16

Richard Rutsche · Accepted Answer · 2016-05-24 12:07:48Z

1

The best approach in my view is to define some kind of reset class for your component and put in a set of css resets you can find out there (e.g. http://meyerweb.com/eric/tools/css/reset/)

The definition in a sass file could look like this:

.your-component-reset {
    div, span, object, iframe {
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: normal;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    // add some more reset styles
}

To avoid writing a lot when you don't want to use sass just use the universal selector *:

.your-component-reset * {
     margin: 0;
     padding: 0;
     font-weight: normal;
     // other reset styles ...
}

answered May 24, 2016 at 12:07

Richard Rutsche

1,20610 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How to prevent outside CSS from adding and overriding ReactJS component styles

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related