Comportement inattendu (bug du bouton blanc) lors de l'utilisation de Tailwind et MUI dans le projet NextJS
P粉996763314
P粉996763314 2023-11-04 11:04:23
0
1
544

Je construis actuellement un projet en utilisant la bibliothèque NextJS, TailwindCSS et MUI React UI.

Chaque fois que j'essaie d'ajouter un bouton MUI à mon projet, cela fonctionne bien mais la couleur du bouton reste blanche.

La couleur revient à la normale au survol et a toujours l'effet d'entraînement lorsque vous cliquez sur le bouton. Mais lorsqu'il n'est pas en vol stationnaire, il revient en blanc.

En supprimant la directive tailwind du fichier CSS global que j'ai importé dans le fichier _app.{js,jsx.ts,tsx}, le bouton a de nouveau bien fonctionné, mais cela a également supprimé le TailwindCSS.

Existe-t-il un moyen de résoudre ce problème tout en conservant la directive ? Ou peut-être utiliser une autre méthode pour inclure le CSS tailwind ?

MISE À JOUR(15 août 2022)

L'équipe MUI a maintenant ajouté la prise en charge du CSS tailwind, veuillez suivre ce lien pour les instructions https://mui.com/material-ui/guides/interoperability/#tailwind-css

P粉996763314
P粉996763314

répondre à tous (1)
P粉032977207

Le problème ici est que Tailwinds Preflig implémente le style suivant Lors de l'ajout de

@tailwind base;

Vers votre feuille de style :

button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }

C'est plus spécifique que la définition de la couleur d'arrière-plan de Material-UI.

Vous pouvez résoudre ce problème en supprimant le "@tailwind base;" de vos styles et en implémentant votre propre feuille de style de réinitialisation, mais cela présente d'autres inconvénients :https://tailwindcss.com/docs/preflight

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!