[Help] Conflict with MUI in Storybook

[marc-gavanier]

Standard preview of badge component shows like this:

But when I apply isSmall property

The preview renders with a text size issue:

After looking in navigator inspector, I noticed that .fr-badge--sm has been overriden

fr-badge--sm {
  font-size: 0.75rem; /* overriden */
  line-height: 1.25rem; /* overriden */
  min-height: 1.125rem;
  padding: 0 0.375rem;
  overflow: initial;
  max-width: 100%;
  max-height: none;
}

It appears that p:not([class^="Mui"]) is responsible of this behaviour:

p:not([class^="Mui"]) {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: var(--text-spacing);
}

Preview is OK after disabling font-size and line-height styles:

After looking in project files, p:not([class^="Mui"]) selector is present in dsfr/dsfr(.min).css files which are generated while running yarn build command.

This code in patchCssForMui.ts is probably the root of the problem:

const selectorNotMui = `${selector}:not([class^="Mui"])`;

if (media === "root") {
    if (selector === "[href]") {
        return selectorNotMui;
    }

    if (selector === "p") {
        return selectorNotMui;
    }
}

[garronej]

Hello @marc-gavanier,
Thanks for reporting.

[garronej]

Damn, now I understand why I had all theses problem trying to patch the clashes between MUI and the DSFR CSS.
The :not([class^="Mui"]) increaces the specificity!

Well how should I proceed then... 🤔

Maybe I could render the following SCSS code and replace dsfr.css by it.

*:not([class^="Mui"]) {
   /* The whol dsfr.css code */
}

[garronej]

I think the best approach is to fix the clash on a case by case basis with style override.

[garronej]

Done, thanks again for the detailed report, it helped me understand that the approach was wrong.

[marc-gavanier]

You're welcome, thank you for the fix 🙂