MUI x DSFR : Checkbox @mui disabled = bug d'affichage

[PlugNPush]

Bonjour,

Je ne sais pas trop si cette issue est un problème de React DSFR ou du DSFR, mais lorsque j'utilise la Checkbox d'MUI et que je définis disabled={true}, la checkbox obtient une sorte d'ombre deux fois plus grande qu'elle-même par dessus, ce qui n'est pas agréable pour l'utilisateur.

Le problème ne se produit pas avec une simple balise input HTML, donc je suppose qu'il y a un problème avec le provider MUI du DSFR.

Illustration :

<input type="checkbox" checked={true} disabled={false}/> <Checkbox checked={true} disabled={false} />

<input type="checkbox" checked={true} disabled={true}/> <Checkbox checked={true} disabled={true} />

Le CSS qui affecte MUI est, d'après mon navigateur :
inline:2218

/**
 * Override de l'opacité chrome sur un élément disabled
 */
a:not([href]),
button:disabled,
input:disabled,
input[type=checkbox]:disabled,
input[type=checkbox]:disabled + label,
input[type=radio]:disabled,
input[type=radio]:disabled + label,
textarea:disabled,
video:not([href]),
audio:not([href]) {
  opacity: 1;
  color: var(--text-disabled-grey);
}

Merci pour votre aide.

[enguerranws]

@PlugNPush est-ce que tu peux fournir le code HTML de ce qui enrobe l'input ?

La grosse différence, c'est que le composant Checkbox retourne toute une structure html (fieldset, legend, etc), pas juste un input. Donc selon ce qu'il y a autour, certaines règles CSS peuvent venir parasiter l'affichage que tu souhaites.

[PlugNPush]

@enguerranws Hello, désolé pour le retard, je n'ai pas utilisé de checkbox désactivée durant une longue période, Le problème est toujours présent aujourd'hui.

<span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium css-1gjqamo-MuiButtonBase-root-MuiCheckbox-root" tabindex="-1" aria-disabled="true"><input data-indeterminate="false" class="PrivateSwitchBase-input css-j8yymo" type="checkbox" disabled=""><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxOutlineBlankIcon"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></span>

[PlugNPush]

Comme indiqué précédemment, la règle ci-jointe est responsable de l'effet indésirable. En retirant opacity: 1; le problème disparait.

[PlugNPush]

En le mettant à 0.5, on voit le grand carré (qui ne devrait pas être visible) supperposé au petit carré

En mode activé, la zone concerneé sert à afficher un halo autour de la checkbox

[PlugNPush]

En fix temporaire :

.MuiCheckbox-root .PrivateSwitchBase-input {
  opacity: 0 !important;
}