Кастомизация размеров внутренних частей компонентов

[Yar56]

допустим у меня есть компонент
у него есть props action
и когда я передаю туда свою разметку я хочу изменить стили обертки для action

на данный момент я делаю это так
задаю плэейсхолдеру className={styles.placeholder}

потом в css
.placeholder :global(.vkuiPlaceholder__action) {
width: 100%;
}

т.е. таким образом я цепляюсь за внутреннюю реализацию компонентов
как можно этого избежать?

[mendrew]

Привет!

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

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

Пример использования такого подхода уже можно посмотреть в документации компонента Placeholder.
Вот ссылка на Markdown.
Доступно с версии v5.8.0

Из примера:

<Placeholder.Container>
  <Placeholder.Icon>
    <Icon56UserAddOutline />
  </Placeholder.Icon>
  <Placeholder.Header>Find friends</Placeholder.Header>
  <Placeholder.Text>The people you add as your friends will be displayed here</Placeholder.Text>
  <Placeholder.Actions>
    <ButtonGroup mode="vertical" align="center">
      <Button size="m">Button</Button>
      <Button size="m" mode="tertiary">
        Button
      </Button>
    </ButtonGroup>
  </Placeholder.Actions>
</Placeholder.Container>

Тут как раз можно точечно в Placeholder.Action передать нужный класс.

<Placeholder.Actions className={styles.placeholderAction}>...</PlaceholderAction>

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

[Yar56]

спасибо за ответ)