无法弄清楚如何为第 3 方库元素修复 CSS

Question

我正在尝试找出一种方法来覆盖 Plotly.js

中的奇怪默认值

如果您深入研究 ploty.js polar scatter example 的 class "title-group" 标题文本，您会发现它有一个自动显示的白色 text-shadow，当您使用除了白色背景。我希望能够使 text-shadow 无效，但我无法弄清楚 css 来做到这一点。可以吗？我在想我可以以某种方式在我的情节周围制作一个 div 并强制所有 children 元素使用具有 0 宽度和 0 高度的 text-shadow。

所以现在我有这个代码：

CSS 文件：

div#polarScatterPlotCSS {
  text-shadow: 2px 2px #ff0000 !important;
  color: rgb(0,0,255) !important;
}

JSX 文件：

<div id="polarScatterPlotCSS">test
    <div id="polarScatterPlot">abc
    </div>
</div>

我可以看到应用于 "test" 和 "abc" 的样式，甚至可以看到极坐标散点图图例中的文本，这意味着 Plotly.js 图表受到了影响。不过，图例文本从来没有 text-shadow。该图的标题和轴具有奇怪的默认值 text-shadow 并且没有被覆盖 :(

Answer 1

如果在新的rul中写同样的参数，在分号前加上!important（会覆盖原来的设置。

只是"erase"一个设置，这取决于参数：在某些情况下你会写none !important（或者甚至不带!important），在其他情况下你会写initial

你的情况可能是 text.shadow: none;，如果这还不够写 text.shadow: none !important;

Answer 2

这是为我做的：

div#polarScatterPlotCSS > * text {
  text-shadow: none !important;
}

Answer 3

除了上述基于 CSS 的解决方案外，我要指出 Plotly.js 在 layout 对象中有一个 API 用于控制极坐标地块。这使您可以避免使用 !important.

layout: {
    font: {
        outlineColor: 'transparent'  // or repeat layout.paper_bgcolor here
    }
    //...
}

无法弄清楚如何为第 3 方库元素修复 CSS

Can't figure out how to fix CSS for 3rd party library element

html

javascript

css

plotly