Button in Material UI is transparent when loading-CodePudding

Every time I start a new project with Material UI, I have the same problem with buttons ignoring their primary color. For a second when loading, the background color is clearly visible, but after that the button is transparent.

I have installed all the necessary packages:

npm install @mui/material @emotion/react @emotion/styled

And just placed a button like this:

import {Button} from "@mui/material";
<Button variant="contained" color="primary">Contained</Button>

EDIT: I found that if I delete the following line from globals.css, the Material UI works as it should. But I need this because we will also use tailwind for styling

@tailwind base;
@tailwind components;
@tailwind utilities;

CodePudding user response：

You must disable preflight in your TailwindCSS configuration to prevent defaults overriding MUI styling:

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

If you have not done so already, you should also follow MUI instructions for changing the CSS injection order if you are going to use external style sheets in order to reliably style MUI components using TailwindCSS.