Свойства as и forwardedAs
as
Иногда, при использовании компонентов, бывает необходимо сменить тег.
Например, в случае использования компонента Button нужно сменить ему тег button на a.
Для ситуаций, подобной этой, подходит свойство styled-components as:
В иных ситуациях может понадобится передать стилизованный компонент вместо указания тега:
forwardedAs
Бывают ситуации, когда компонент многократно обернут в хок styled.
В таких случаях использование свойства as не даст никакого результата,
т.к тег (или стилизованный компонент) заменит собой желаемый, как в данном примере:
Для того, чтобы избежать подобных ошибок, используйте forwardedAs вместо as:
Пояснение к примеру: поскольку
Button- уже является стилизованным компонентом, повторное оборачивание её в хокstyledприводит к увеличению вложенности компонентов (не DOM-узлов!). См. официальзую документацию styled-components https://styled-components.com/docs/api#forwardedas-prop.