CSS `@layer primereact` is not working with Bootstrap/MUI

[kabalan-datapostie]

Describe the bug

Use case: PrimeReact is a fantastic theme and component library. Other CSS toolkits (e.g. Bootstrap, Tailwind, Materialize, etc.) provide useful utilities on top of it like grid, spacing, and much more. So, it's a common use case to use themed PrimeReact with these other "utility" CSS libraries, and want PrimeReact to take precedence over these utility libraries.

The problem: this use to work well. However, PrimeReact 10.x removed the "core" PrimeReact library in favour of only needing to import the style library, and added layers to the themed libraries. These layers mean that the other utility libraries (Bootstrap etc.) now take precedence over core PrimeReact classes.

Potential solutions:

• Provide an elegant way (in CRA and Next.js) to add a layer to the utility library (e.g. Bootstrap) and make the PrimeReact layer take precedence. This would be great, but it seems a lot easier to make a change to PrimeReact than maintain fixes for all other commonly used utility libraries.
• Only add @layer primereact when working with the unstyled version of PrimeReact.
• Add an option to import themed PrimeReact with or without the @layer
• Other?

---

Note: this issue is related to issue https://github.com/primefaces/primereact/issues/4987, but the conversation veered more towards unstyled PrimeReact and specific to Tailwind, whereas this is a more ubiquitous issue caused by layers in 10.x that other commenters in that issue have mentioned.

Reproducer

https://codesandbox.io/s/primereact-test-forked-hc22hc?file=/src/index.js

PrimeReact version

10.0.5

React version

18.x

Language

ES6

Build / Runtime

Next.js

Browser(s)

Chrome 118

Steps to reproduce the behavior

See reproducer

Expected behavior

See reproducer and use case in bug description

[melloware]

Assigned to PrimeTek.

[yrios-cdd]

I use primereact in an app that also uses Bootstrap, when upgrading to version 10.0.2 the styles are breaking because Bootstrap styles are taking precedence over the PrimeReact theme.

[melloware]

Bootstrap instructions: https://primereact.org/bootstrap/

[yrios-cdd]

Bootstrap instructions: https://primereact.org/bootstrap/

@melloware @kabalan-datapostie

This solution does not solve my problem. My case is different, I use Primereact components inserted in a legacy multipage application where the layout is built using Bootstrap, so the Bootstrap CSS files are loaded independently of React. My goal is to continue using the primereact/resources/themes/bootstrap4-light-blue/theme.css theme in the Primereact components and have the theme styles take precedence over the bootstrap styles loaded in the layout of the app. That way we have been using Primereact until version 10.0.2. How can we continue using Primereact in this way in the new versions after 10.0.2, without having to opt for the "Unstyled mode" and "Pass Through"?

[melloware]

can you put together a Stackblitz showing your issue @yrios-cdd ?

[kabalan-datapostie]

I agree with @yrios-cdd - the use case here is that we want to use PrimeReact themes (in my case for instance mdc-indigo), but want to also use the "utility" (e.g. flex, spacing, etc.) classes of other libraries, say bootstrap. So, we want themed PrimeReact to take precedence over external libraries.

If I understand correctly, https://primereact.org/bootstrap/ fulfills the opposite case: where we want to use the theming of the external libraries, and have them take precedence over PrimeReact unstyled.

So the reproducer above stays valid: https://codesandbox.io/s/primereact-test-forked-hc22hc?file=/src/index.js

[yrios-cdd]

can you put together a Stackblitz showing your issue @yrios-cdd ?

@melloware The one shown by @kabalan-datapostie is valid, only this one installs and imports Bootstrap and in my case Bootstrap is loaded separately in the app layout template using <!-- Bootstrap --> <link rel="stylesheet" type="text/css" media="screen" href="{% static 'bootstrap/5.0.1/css/bootstrap.min.css' %}"/>, but it's the same case.

[melloware]

Yep I see it I think I will rename this ticket to Bootstrap specifically as Bootstrap does not appear to support @layer like Tailwind does.

[yrios-cdd]

Any estimate of when a solution to this problem might be released? I am still unable to migrate to version 10.

[melloware]

From Optimus on Discord: https://discord.com/channels/787967399105134612/787968635414118421/1205480133855678524

Bootstrap is not super suitable to unstyled mode, it has css based components that accept a certain DOM. Tailwind is the best fit for the styled mode. I don't think you can do a full bootstrap theme, it is not powerful enough to style all the components of Prime. But Tailwind is so we created the Tailwind Presets projects based on this idea. Bulma, Bootstrap have an opinionated approach which is not compatible.