1

I am using StyledComponents in a React project, and I'm planning to overwriting the styles in Airbnb's react-dates library. They are using a CSS file with classes, but I want to overwrite their CSS using a wrapper component through StyledComponents (to keep my project consistent with not using CSS files).

Is this possible? I'm not finding anything on it.

Josh
  • 386
  • 5
  • 14
  • Can you show some code? – Scott Oct 20 '18 at 02:12
  • Try to be as specific as possible to override other less specific CSS that may be blocking you. Force it by adding `!important`. – Scott Oct 20 '18 at 02:13
  • 1
    That's the thing, I'm not sure how to make a styled component more specific if you can't select classes or ids. With 4 or 5 different divs with different classes, how could you select these items? Basically I'm trying to create a wrapper component that's going to act very much like a standalone CSS file. – Josh Oct 20 '18 at 02:16
  • 1
    Like this: `#TheID .theClassName .otherDIV .someDIV .divDIV .divitisDIV {color: purple!important;}` – Scott Oct 20 '18 at 02:20
  • 1
    Oh thanks, I probably should have tried that before asking the question. Not sure why I assumed that wouldn't work. Thanks for the help. – Josh Oct 20 '18 at 02:24
  • 1
    did it work okay? – Scott Oct 20 '18 at 04:18
  • 1
    Yep it worked as intended, thanks – Josh Oct 20 '18 at 23:05

1 Answers1

3

Try to be as specific as possible and if necessary add the !important flag.

For example:

#TheID .theClassName .otherDIV .someDIV .divDIV .divitisDIV { color: purple!important; }

Scott
  • 3,736
  • 2
  • 26
  • 44