我目前正在使用 PrimeReact 的日历组件开发一个项目,并且遇到了边框和填充似乎丢失的问题。我的公共文件夹中有一个 theme.css 文件,因为我希望网站允许动态主题切换。该文件在该部分中导入。
但是,如果我直接从 PrimeReact node_modules 文件夹导入主题 CSS,则内边距和边框会正确显示。
我尝试过的一件事是从 globals.css 中删除 Tailwind 的基本样式,当我这样做时,填充和边框会重新出现,但显然,这会破坏其他组件的样式。当我检查日历组件时,它显示首先应用了 Tailwind 的基础层,然后是 PrimeReact 的样式。
如何解决 Tailwind 的基本样式和 PrimeReact 的主题之间的冲突?
全局.css
@layer primereact, tailwind-base, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
您是否尝试过以不同的顺序应用样式?我会尝试像这样调整图层顺序:
@layer tailwind-base {
@tailwind base;
}
@layer primereact {
@import 'path/to/primereact/theme.css';
or
@import primeract;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
我想通过这样做,primereact 应该优先于 tailwind。