Opt-out of picocss for selective parts of the app

[felipesere]

👋 Really enjoying PicoCSS for a small app I'm building. It works brilliantly for 90% of what I need.
For the remaining 10%, I'd prefer for PicoCSS to not apply any styles at all...
Is there a way/mechanic to add a class="pico-unstyled" or something to opt-out for a part of the app?

At the moment its clashing with react-toastify, but there might be more...

[nakibrayane]

you can include only the components that you use using scss

example:

// Config
@import "variables";

// Theming
@import "themes/default";

// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure

// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, template, [hidden], dialog, canvas

// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/dropdown"; // dropdown

// Utilities
@import "utilities/loading"; // aria-busy=true
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

or you just have to overwrite pico's styles with your own

[proxict]

I am dealing with the same problem - I need to exclude a component (custom time picker) and all its children from being styled by pico.
The time picker component uses some elements that I also use outside of this component so, as far as I understand, I can't simply exclude the whole module in the SCSS file.

I've tried setting all style values for the time picker to their initial values using .timepicker-ui * { all: initial; }, also tried unset, but unfortunately neither of these work (maybe because the time picker component is created using javascript? I'm not versed at all with web technologies, so I'm just guessing here).

And exactly because I'm a complete analphabet when it comes to web technologies, I'd like to ask if this is something that's possible to do with pico. I've spent several hours trying to figure it out, over an hour consulting uncle Google and even resorted to ChatGPT, but all to no avail.

I reckon I could go over the generated CSS file and specify the :not(.class-name) selector for every element, but that seems very dirty and I am still hoping there's a cleaner way of going about it - perhaps some trick with SCSS.

I would very much appreciate any pointers!