Question

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

如果你深入到课程＆＃34; title-group＆＃34; ploty.js polar scatter example的标题文字然后你会看到它有一个自动的白色文字阴影，当你使用白色背景以外的任何东西时都是可怕的。我希望能够使文本阴影无效，但我无法弄清楚css这样做。可以吗？我想我可以以某种方式在我的情节周围做一个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>

我可以看到适用于＆＃34; test＆＃34;和＆＃34; abc＆＃34;甚至是我的Polar Scatter Plot图例中的文字，这意味着Plotly.js图表会受到影响。但是，图例文本从未有过文本阴影。绘图的标题和轴具有奇怪的默认文本阴影，并且没有被覆盖：（

Answer 1

如果你在新的rul中写相同的参数并添加!important（在分号之前，它将覆盖原始设置。

要仅“擦除”一个设置，它取决于参数：在某些情况下，你会写none !important（甚至_不用!important），在其他情况下initial

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

Answer 2

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

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

Answer 3

这对我来说是这样的：

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

无法弄清楚如何修复第三方库元素的CSS

3 个答案: