Не могу понять, как исправить CSS для элемента сторонней библиотеки

Я пытаюсь найти способ переопределить нечетное значение по умолчанию в Plotly.js.

Если вы углубитесь в текст заголовка класса "title-group" для пример полярного рассеяния ploty.js тогда вы увидите, что он имеет автоматическую белую тень текста, что ужасно, когда вы используете что-либо, кроме белого фона. Я хотел бы иметь возможность аннулировать эту текстовую тень, но я не могу понять, как это сделать с помощью 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>

Я вижу стиль, примененный к «тесту» и «абв» и даже к тексту в легенде моего графика полярного рассеяния, что означает, что диаграмма Plotly.js затронута. Однако текст легенды никогда не имел текстовой тени. Заголовок и ось графика имеют причудливую текстовую тень по умолчанию и не переопределяются :(


javascript html css plotly
person smuggledPancakes    schedule 11.12.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

В дополнение к вышеупомянутым решениям на основе CSS я укажу, что у Plotly.js есть API для управления этим в объекте layout для полярных графиков. Это позволяет избежать использования !important.

layout: {
    font: {
        outlineColor: 'transparent'  // or repeat layout.paper_bgcolor here
    }
    //...
}
person emackey    schedule 14.12.2015

arrow_upward
1
arrow_downward

если вы напишете тот же параметр в новом правиле и добавите !important (перед точкой с запятой, он переопределит исходную настройку.

Чтобы просто «стереть» настройку, это зависит от параметра: в некоторых случаях вы должны написать none !important (или даже _без !important), в других initial

в вашем случае это, наверное, text.shadow: none;, а если этого недостаточно, напишите text.shadow: none !important;

person Johannes    schedule 11.12.2015
comment
Я думаю, что мне нужно использовать text-shadow, а не text.shadow. Кроме того, я новичок в css. Это должно быть установлено через идентификатор или класс или что-то еще? В настоящее время я все еще не могу заставить его работать - person smuggledPancakes; 12.12.2015
comment
это зависит от: я говорил о CSS (то есть о таблице стилей), где это действительно text-shadowкак я написал (см. также w3schools.com/cssref/css3_pr_text-shadow.asp). Но если вы хотите установить это через javascript, это может быть text.shadow - person Johannes; 12.12.2015
comment
Я обновил свой вопрос некоторым кодом, надеюсь, это лучше объясняет мою проблему. - person smuggledPancakes; 12.12.2015
comment
да, так что я бы написал в CSS: `#polarScatterPlotCSS { text-shadow: none; } - person Johannes; 12.12.2015

arrow_upward
0
arrow_downward

это сделало это для меня:

div#polarScatterPlotCSS > * text {
  text-shadow: none !important;
}
person smuggledPancakes    schedule 14.12.2015