0

Image will best describe this:

![enter image description here

code sandbox:https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html

I'm writing React app inside non react app and their styles interfere with my React app styles.

How do I overwrite bootstrap-enterprise.css stylesheet only for the region of my React app without overriding the style rest for the rest of the page (The top app bar is theirs)

Edit:

.App {
  all: revert;
}

worked initially, but then I tried it my real usecase (overrding Mui Textfield styling component) and it didn't. i edited the codesandbox for the exact case.

Eliav Louski
  • 3,593
  • 2
  • 28
  • 52

1 Answers1

2

Since your React app is separated from the rest of the app, you could use the all css property to reset all the styles inside your React app before to write yours :

/* Affect all the elements under .App */
.App * {
  all: unset
}

In your codesandbox, adding it at the top of your styles.css seems to work fine.

Quentin Grisel
  • 4,794
  • 1
  • 10
  • 15
  • this also removes all styles inside my app, i don't want to override the styles on the app itself – Eliav Louski Mar 29 '22 at 13:03
  • 1
    @EliavLouski Well you edited it to give a better example, thank you. By adding `all: unset !important`, it seems to work but the style coming from Mui is gone as well. If it is not what you want, then you could try something like `.App *:not([class*='Mui'])` but you'll have to do a bit of search since this one doesn't work well. I found it here : https://stackoverflow.com/a/13352103/9868549 – Quentin Grisel Mar 29 '22 at 14:57
  • It does not override MUI styles because they come later – Eliav Louski Mar 29 '22 at 16:38