React Localize Global Styles?-CodePudding

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; } . 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)?

CodePudding user response：

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>
</>