How to make reset.css not apply inside 1 element?

Question

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.

can explain the thing that you want more precisely.do you need to apply styles for separately for your react components? is this your question? — Lakruwan Pathirage, Jul 12 '22 at 23:36
So in a clean new html file without css, an "h1" element will be bigger and thicker styling, for example. My reset.css resets its size throughout all project (and a lot of other elements, hence i can't just change them one by one). Now I want h1 (or all elements) to return to its original styling like in a clean html file, but only on 1 component or inside 1 tag. And rest of the project keeps using reset.css. — Koray Aydemir, Jul 12 '22 at 23:38

score 0 · Answer 1 · answered Jul 12 '22 at 23:48

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

score 0 · Accepted Answer · answered Jul 12 '22 at 23:59

0

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;
}

answered Jul 12 '22 at 23:59

Koray Aydemir

310
3
9

I'm already using css modules in my project. But I also have a reset on index.css to globally reset the css. Didn't know it wasn't good practice. What is the best practice for react ? How should I use a css reset ? – Koray Aydemir Jul 13 '22 at 09:30

How to make reset.css not apply inside 1 element?

2 Answers2