I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style) which has a css reset, removes all the default styling from elements of the portable text.

How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.

CodePudding user response：

In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.

Option one -use module.css file.

in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here

option two -use third party library like styled component. this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc

CodePudding user response：

Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.

.unset * {
  all: revert;
}