如何覆盖Chakra UI默认CSS？

Question

我有这个Chakra UI组件：

<Tag
   variant={'outline'}
   cursor={'pointer'}
   outline={'none'}
   className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>

，它呈现像下面这样的轮廓照相机图标

​

​

现在我想去掉提纲。我试图像上面这样添加outline={'none'}，但是它没有工作。在控制台中，我可以看到Chakra始终处于最高优先级，并且覆盖所有其他CSS。

如何将此自定义CSS应用于Tag组件？我尝试导入一个SCSS文件，但是它是相同的，被Chakra默认CSS覆盖。

Answer 1

你能看到的是box-shadow而不是outline

<Tag
   variant={'outline'}
   cursor={'pointer'}
   boxShadow={'none'}
   className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>