How to turn off text-shadow in a PrismJS CSS theme?

Question

I'm trying to format a code block in Gatsby with Prism.js, but the built-in CSS that I import adds a text-shadow that makes it look awful:

When I toggle off the text-shadow in Chrome DevTools, it looks great:

However, I can't figure out how to do this in the code.

The code block is inheriting the text-shadow CSS from a built-in prism.css file that got imported as follows:

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

When I try using inline styles it gets overridden by the prism.css. How can I remove this text-shadow?

Answer 1

CSS is evaluated in the order it's imported, so adding your own CSS on the same selector and importing it after the Prism CSS file should override the Prism CSS you don't want.

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

or

.token { 
    text-shadow: none;
}