Можно ли передавать CSS классы через props?

Question

[Sergey750il]

Здравствуйте. Верным ли решением считается передавать CSS классы в компонент через props? Или props исключительно для данных?

Answer 1

[Сергей delphinpro]

я так понимаю, ваш класс меняет состояние компонента. Передавать состояние компонента через пропсы нормально.
Однако я бы напрямую может и не стал так делать.
Лучше передать само состояние, и внутри компонента назначить класс

Плохо

props: {
  'class': String
}

Лучше

props: {
  disabled: Boolean
}

<div :class={disabled: disabled}>

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

Answer 2

[Алексей Ярков]

Можно

Comments

[Сергей delphinpro]

синтаксически можно. А с точки зрения чистоты кода?

[Алексей Ярков]

Сергей delphinpro, ну от ситуации зависит я думаю. Хотя я стараюсь избегать этого. Если надо применять класс к компоненту, то пропсы не нужны. Просто добавляем класс и всё работает. А если надо добавить класс дочернему компоненту дочернего компонента или глубже, то что-то пошло не так. Но вообще можно же ))

[Сергей delphinpro]

Алексей Ярков,

Но вообще можно же ))

в этом и соль ) можно, конечно, но лучше не надо

Answer 3

[Aetae]

Передавать класс в props можно, многие библиотек так делают, но осторожно и только когда без этого не обойтись.

Особенно стоит обратить внимание на это при использовании scoped стилей: переданный внутрь класс не будет работать сам по себе, т.к. привязан к scope родительского компонента, придётся использовать псвевдоселектор :deep(), а это уже чревато коллизиями.

Лучше же разбить всё на максимально небольшие компоненты с простыми api конфигурации и повсеместно использовать слоты, чтобы такие вещи не требовались слишком часто.

Comments

[Sergey750il]

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

[Aetae]

Sergey750il, это слишком от многого зависит. По хорошему должно хватать изменений корневого класса.
Собственно посмотрите как работает стилизуется и нативный <input> (или любой иной нативный компонент) - вот по идее так(в том же диапазоне допуска) должен стилизоваться и ваш.
В крайнем случае можно использовать документированные (s)css-переменные. Т.е. такие, что помимо обязательности наличия чёткой документации(хотя бы в readme.md рядом с компонентом), обязаны будут работать аналогичным образом даже при полном переписывании вами компонента.
Не будет лишним глянуть на то, как работают с этим крупные библиотеки компонентов: quasar, vuetify, можно заодно глянуть и библиотеки для других фреймворков, суть веде схожая.