javascript - 无法弄清楚如何修复 3rd 方库元素的 CSS

Question

我正在尝试找出一种方法来覆盖 Plotly.js 中的奇怪默认值

如果您深入了解 ploty.js polar scatter example 的类“title-group”标题文本然后你会看到它有一个自动的白色文本阴影，当你使用除白色背景以外的任何东西时，它是可怕的。我希望能够取消该文本阴影，但我无法弄清楚要执行此操作的 css。可以吗？我在想我可以以某种方式围绕我的 plotly 制作一个 div 并强制所有子元素使用宽度为 0 高度为 0 的文本阴影。

到目前为止，我有这段代码:

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 图表受到了影响。虽然图例文本从来没有文本阴影。绘图的标题和轴具有奇怪的默认文本阴影，并且没有被覆盖:(

Answer 1

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

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