React Localize Global Styles?

Question

Is it possible to localize the global styles of a module to only one file?

for instance, I would like to change the width of an item from a react module but only for one file. inline styles aren't possible :/

edit for context: in my particular case ... i'm using 'react-multi-carousel' ... and to go over the breakpoint behavior, I've set .react-multi-carousel-item { width: 310px !important; } .react-multi-carousel-item { width: 310px !important; } . However i'd like this style to be applied only to one component and not my entire project (I'm using the carousel in more than one place). Any way to localize a global style (CSS file)?

Answer 1

You just nest the CSS rule to only apply when inside a specific container:

.my-container .react-multi-carousel-item { width: 310px !important; }

And then in React:

return <>
  <MultiCarousel />
  <div className="my-container">
    <MultiCarousel />
  </div>
</>

In that example the first <MultiCarousel /> would not see the extra style, but the second one would.

---

"is there any way to add css within the TSX file by any chance? If possible, I'd like to not have an external css file."

You could try a scoped style tag

For example:

return <>
  <div>
    <style scoped>{`
      .react-multi-carousel-item {
        width: 310px !important;
      }
    `}</style>
    <MultiCarousel />
  </div>
</>