如何在旧类上覆盖 tailwind 类，例如 css 中的 !important

Question

我在

text-[20px]

中使用了

<Badge/>

，但它被另一个css类覆盖了，我如何覆盖

tailwind

类

<Badge
  label="1"
  className='w-[30px] h-[30px] p-6 ml-4 text-[20px]'
  style={{ lineHeight: '20px'}}>
  1
</Badge>

Answer 1

如果你想覆盖其他类上的

text-[20px]

，你可以这样编写类：

 <Badge
   label="1"
   className='w-[30px] h-[30px] p-6 ml-4 [&&]:text-[20px]'
   style={{ lineHeight: '20px'}}>
   1
 </Badge>