我有一个问题,我还没有找到任何问题的任何地方。
当我使用移动的的填充或边距,并且我想在更大的屏幕上更改这些填充/边距时,我为移动设备设置的基本值会保留并覆盖不同断点处的特定值。
以下是我在调试器中看到的:正如您在py-3值中看到的,它保持不变并覆盖了应用于md断点的py-0。
这是移动的版
这是在桌面版本
这是我的代码,py-3
和md:py-0
应用于按钮:
<div className="...">
{languages.map((lng) => (
<button className="px-2.5 py-3 md:py-0 text-xs leading-5 text-gray-500 text-center">
{lng.name}
</button>
))}
</div>
我在一个经典的next.js安装上,没有任何extends/theme替换,我的css文件中没有覆盖这些类。
我是不是漏掉了什么?
编辑:我试着在我的py-0
前面应用一个“!”,就像这样:md:!py-0
但还是一样的。即使!important关键字被正确添加,它仍然被覆盖。
1条答案
按热度按时间dsekswqp1#
!important
赋值覆盖以下内容(因此在正常情况下覆盖)@media { }
!important
即可正确显示.py-3 { }
。