Highcharts如何将内联样式添加到HTML元素？

Question

我正在使用Highcharts库来创建图。我有两个看似非常相似的图表，但出于我试图找出的原因，它们在CSS方面的表现并不相同。

[我观察到的一件事是，例如，这两个图表中的导出按钮的菜单项具有不同的代码（使用Chrome开发工具提取）。

在样式方面通常表现出预期的图表具有以下元素代码：

<div class="highcharts-menu-item" style="cursor: pointer; padding: 0.5em 1em; color: rgb(51, 51, 51); background: none; font-size: 11px; transition: background 250ms ease 0s, color 250ms ease 0s;">Download PDF document</div>

当我更改样式时不会“反应”的图表具有相同菜单项的此元素代码：

<div class="highcharts-menu-item">Download PDF document</div>

因此缺少内联样式。当我尝试搜索给定的第一个元素的内联样式代码时，例如“背景：无；”我整个项目都没有结果。因此，我假设Highcharts库负责使用某些JavaScript添加这些内联样式。

这可能是在给定的第一个元素中而不在第二个元素中完成的原因？

关于该库明显使用的这种机制如何工作的一些解释，对于我理解所发生的事情将非常有帮助。

PS：如果有任何相关性，我正在使用React包装器：

<HighchartsReact
  highcharts={ Highcharts }
  constructorType={"stockChart"}
  options={chartOptions}
  ref="chartComponent"
  allowChartUpdate={this.allowChartUpdate}
/>

编辑：我正在使用样式模式。在这种情况下，有必要使用highcharts定义的类编写CSS规则，例如.highcharts-title，但仍然需要写！important像这里

font-size: 22px !important;

因此该字体大小将取代上述的“注入”样式。

Answer 1

有道具，即containerProps，需要类名（我认为）。

所以我建议在您的css文件中创建一个css类，并将该类名称传递给该prop，如下所示：

containerProps = {{ className: 'chartContainer' }}

您可以从here中了解更多信息>