0

I am building a widget on React with CRA and parcel to bundle, which can be added to other websites via a small JS script in index HTML. Used CSS modules for styling the components. I try adding this widget to a WordPress website, the CSS from WP pages override the CSS styles of the components.

I could think about two solutions to retain my styles:

  1. Inline styles to all components
  2. Adding !important to all CSS properties in CSS classes (recommended to be used sparingly)

Will there be a performance hit due to increase in page size due to inline styles Also worried about not being able to use pseudo elements or media queries if I go with inline styles

I hope there some way to achieve this, some packages in react will helpful.

Sid
  • 1
  • 2
    `!important` is a tool of last resort; it almost always means that your CSS "architecture" has a problem. – Pointy Jan 11 '23 at 15:04
  • 1
    just create an override stylesheet that is more specific than the styles you want to override (eg put the component in a div with a class and then use that on top of the existing selector to override it) – Pete Jan 11 '23 at 15:08

0 Answers0