Как правильно стилизовать сторонние компоненты в Vue.js?

Question

[Сергей]

Со своими компонентами всё понятно :)

А как стилизовать импортированный сторонний компонент, который по сути черный ящик - scope, своя структура и классы внутри, но внешний вид не устраивает/не вписывается, а api компонента не предполагает нужного уровня стилизации.
Есть такие, что по умолчанию без классов в принципе, т.е. в теории полагаются на стилизацию уже где-то в проекте.

Что сделать и как сделать это правильно?
С теми, что принимают параметры - передавать классы/переменные/объекты стилей в свойствах?
С теми что не принимают - смотреть шаблон компонента и писать для него глобальные (или в родительском компоненте) стили?
Или вообще копировать компонент полностью и создавать его локальную версию с нужными стилями?

Answer 1

[Aetae]

Ответ: по ситуации. :)

В идеальном мире: сторонние компоненты должны поддерживать всю возможную стилизацию стандартизированным образом: либо через props, либо (реже и хуже) через документированные классы разрешённые к изменению сверху. В ином случае всегда будет оставаться шанс, что всё развалится при обновлении компонента.

Теперь собственно к нашему, катящемуся в бездну, миру: да, смотреть шаблон компонента и менять стили через :deep или глобально. Обязательно писать к этому тесты, чтобы отвал после какого-то обновления не пролез незаметно на прод.
Если править классы становится слишком сложно, то форкать к себе, и править как хочешь. Также можно форкнуть если компонент простой.

Обратно к идеальному миру: при желании можно попробовать пропихнуть пул реквест автору оригинального компонента, поддерживающий нужную кастомизацию(естественно в универсальном и удобном виде).