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;

以便此字體大小取代如上所述的“注入”樣式（盡管 chartOptions 中沒有給出樣式屬性（我認為無論如何都會被 CSS 規則取代）。

Answer 1

道具上有需要類名的containerProps道具（我認為）。

所以我的建議是在你的 css 文件中創建一個 css-class 並將該類名傳遞給該道具，如下所示：

containerProps = {{ className: 'chartContainer' }}

您可以從此處閱讀有關此內容的更多信息