Можно ли применить стиль с помощью CSS?

[TheDarkWizard]

@awesomerobot

Да, в CSS обычно можно полагаться на специфичность. Если вы не знакомы с CSS, всё сводится к следующему: если у вас есть несколько стилей, применяемых к одному и тому же элементу, победит более специфичный стиль.

<div class="custom-container">
  <a class="custom-link">ссылка здесь</a>
</div>

Так что вам нужно проверить, есть ли у элемента (или у его родительского элемента) в компоненте, который вы пытаетесь изменить, уникальный класс где-нибудь… что-то вроде:

В приведённом выше примере это либо .custom-link, либо, если у самого элемента нет прямого класса, можно использовать родительский элемент, например .custom-container a. Если стиль в компоненте изначально определён как .custom-link, вы можете гарантировать его переопределение, более точно указав a.custom-link.

Если в компоненте нет уникального класса, вы также можете использовать контейнер плагина (plugin outlet container). Когда в кастомизации используется плагин outlet, к контейнеру добавляется специальный класс. Используя пример со стилизацией ссылки, это может выглядеть так: .above-site-header-outlet.brand-header a, где «brand-header» — это имя шаблона, добавленного из компонента.

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

Большое спасибо. Это, безусловно, помогает.

@awesomerobot

Пример из компонента, который вы пытаетесь стилизовать, был бы очень полезен.

В качестве примера: у меня установлены темы Graceful. Graceful Theme — я теперь понимаю, что вы опубликовали их как продолжение предыдущего стиля.

В моём универсальном компоненте темы я делал такие вещи, как загрузка фоновых ассетов, изменение кнопки «Нравится» и ещё несколько других вещей. Однако я осознал, что хочу изменить цвет фона в версии с тёмной палитрой на любой другой, не затрагивая версию со светлой палитрой.

Если быть точным, вот это:

background-color: $primary-very-low;

Теперь я хочу сделать как можно больше в рамках одного компонента темы, поскольку технически это один и тот же стиль, пока не начали появляться такие мелочи, как эта, которые не являются универсальными изменениями. Я не хочу, если возможно, создавать отдельный компонент «Тёмный» и отдельный компонент «Светлый».

Цель здесь — оставить Graceful в покое, за исключением изменений палитры, и всё остальное делать в нашем собственном компоненте, чтобы при обновлении со стороны вас или кого-то ещё нам не приходилось постоянно заново применять наши правки.

Я заметил, что в Discourse активно используются переменные, что мне очень нравится; чтение руководств по темизации было настоящим удовольствием. Я увидел, что существуют конструкции вроде [data-topic-id=“117”], так что, возможно, стоит предложить что-то вроде [data-theme-id]?