Mui和Tailwindcss都有定义按钮的方式,但是最近使用的Tailwindcss版本,默认按钮样式会影响Mui中的按钮样式,导致Mui中的按钮组件显示为透明,无法正常使用。
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
起使用的就是上面这行样式,背景色设置为透明会将未使用Tailwindcss的所有button为透明。
我使用的Tailwindcss版本是3.3.0,Mui版本是5.15.5。
目前只有一种解决办法,在tailwind.config.js配置文件中添加:
corePlugins: {
preflight: false
}
并下载对应版本的preflight.css,将下载的css引入至项目即可。
import '@/_assets/style/preflight.css'