Как встроенный стиль добавляется к элементам HTML с помощью Highcharts? - PullRequest
0 голосов
/ 15 февраля 2020

Я использую библиотеку Highcharts для создания диаграмм. У меня есть две, казалось бы, очень похожие диаграммы, которые не ведут себя одинаково с точки зрения CSS по причинам, которые я пытаюсь выяснить.

Одна вещь, которую я заметил, состоит в том, что, например, пункты меню кнопки экспорта в этих двух диаграммах имеют различный код (извлеченный с помощью Chrome Dev Tools).

Диаграмма, которая «ведет себя» в целом, как и ожидалось с точки зрения стиля, имеет следующий код элемента:

<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>

Так что встроенный стиль отсутствует. Когда я пытаюсь найти встроенный код стиля первого заданного элемента, например, «background: none;» Я не получаю результатов для всего моего проекта. Поэтому я предполагаю, что библиотека Highcharts отвечает за добавление этих встроенных стилей с некоторыми JavaScript.

Какие могут быть причины, по которым это делается в первом данном элементе, а не во втором?

Некоторое объяснение того, как этот механизм, очевидно, используется библиотекой, было бы очень полезно для моего понимания того, что происходит.

PS: Я использую оболочку React на случай, если это имеет какое-либо отношение:

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

Редактировать: Я использую стиль. В этом случае необходимо написать CSS правил, используя классы, определенные старшими диаграммами, например, .highcharts-title, но все же мне нужно написать! Важно, как здесь

font-size: 22px !important;

, чтобы этот размер шрифта заменял «настоящие» стили, как описано выше (хотя в chartOptions отсутствует атрибут style (который, я думаю, в любом случае будет заменен CSS правилами).

1 Ответ

0 голосов
/ 15 февраля 2020

Есть на подпорках, т.е. containerProps, которому нужно имя класса (я думаю).

Поэтому я предлагаю создать класс css в вашем файле css и передать это имя класса вот так:

containerProps = {{ className: 'chartContainer' }}

Подробнее об этом можно прочитать здесь: здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...