如何在PrismJS CSS主题中关闭文本阴影？

Question

我试图用Prism.js格式化Gatsby中的代码块，但是我导入的内置CSS添加了一个文本阴影，这让它看起来很糟糕：

​

​

当我在Chrome DevTools中关闭文本阴影时，它看起来很棒：

​

​

但是，我不知道如何在代码中做到这一点。

代码块从一个内置的prism.css文件继承文本阴影CSS，该文件按如下方式导入：

import theme from "prism-react-renderer/themes/vsDark"

​

​

当我尝试使用内联样式时，它会被prism.css覆盖。如何删除此文本阴影？

Answer 1

CSS按照导入的顺序进行计算，因此在同一个选择器上添加您自己的CSS并在Prism CSS文件之后导入它应该会覆盖您不需要的Prism CSS。

code[class*="language-"],
pre[class*="language-"] {
  text-shadow: none;
}

或

.token { 
    text-shadow: none;
}