如何关闭 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;
}