2

I am building a pluggable chatbot widget using react. I am aiming for a chatbot widget which you can use on any site sort of like rasa-webchat.

When I used it on some of the sites I found its styles being overridden by the base site on which the widget was added. On debugging I found out that the base site is using styles with !important in their CSS sort of like 

a {
  color: blue !important;
}

which really screwed up my widget styling, so no matter how specific styles I used in my widget CSS it will be overwritten by the base site styles having !important. I found 'css-modules','react-jss' libraries to scope css but none was able to override !important, the only way I found is to add !important to all the styles in my CSS but that is considered a bad approach and since I am using material-ui to build my chatbot I believe it will be hard to add !important to each and every style in the library itself.

Is there any way with which I can ensure that my widget styling will look same irrespective of base site CSS ?

satyam bansal
  • 99
  • 1
  • 1
  • 3

1 Answers1

1

My personal preference would be to use Styled Components.

With Styled Components you can override styles with higher specificity. The example in the documentation, found here, covers exactly what you are asking.

There are also a number of other benefits with using Styled components, ranging from readability to performance gains.

Styled Components Docs

alexr89
  • 381
  • 1
  • 4
  • 14
  • Thanks for the prompt response but my issue is that the parent site is using `!important` in its style as i mentioned in my example above which i cannot change. What styled component does is as mentioned in your link is it increases the cssspecificity of the targeted element but still `!important` of the pparent site has final say . I can add !important in my styles which will override the base site !important but i have to add it to each and every CSS line of my stylesheet to ensure that in future no other styles get overridden – satyam bansal Feb 05 '20 at 11:07
  • Since I am using external library for styling (material-ui) , i have to repeat the same process of adding `!important` to each and everyline there , which is not scalabe. Kindly revert if i am unclear somewehere – satyam bansal Feb 05 '20 at 11:07
  • Interesting, so important in your code will override the parent site site's "final say" but Styled components specificity wont? I'll have a play around and see if I can replicate what you say. – alexr89 Feb 05 '20 at 11:11
  • Thanks for you prompt response, yeah on parent site they have '!important' in their styles which has most CSS specificity in the entire page and to counter it i have to add !important in my styles with more specificity , pardon if i sound repetitive, kindly let me know if you can't replicate it , i will link a sandbox or codepen for it – satyam bansal Feb 05 '20 at 11:18
  • here is a code pen of the issue which i am facing, i have also tried to include what styled components do [click here](https://codepen.io/isam9/pen/poJzYJp?editors=1100) – satyam bansal Feb 05 '20 at 11:31
  • 1
    "With Styled Components you can override styles with higher specificity. The example in the documentation, found here, covers exactly what you are asking." — I've looked at that and can only call it "an unreliable hack". Shoving the same class name in multiple times does bump up the specificity, but not against `!important`, rules with ID selectors, rules which target properties you haven't set explicitly, rules which target elements you haven't set explicitly, and so on. – Quentin Feb 05 '20 at 11:40