Свойства as и forwardedAs

as

Иногда, при использовании компонентов, бывает необходимо сменить тег. Например, в случае использования компонента Button нужно сменить ему тег button на a. Для ситуаций, подобной этой, подходит свойство styled-components as:

Live Editor

Result

В иных ситуациях может понадобится передать стилизованный компонент вместо указания тега:

Live Editor

Result

forwardedAs

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

Live Editor

Result

Для того, чтобы избежать подобных ошибок, используйте forwardedAs вместо as:

Live Editor

Result

Пояснение к примеру: поскольку Button - уже является стилизованным компонентом, повторное оборачивание её в хок styled приводит к увеличению вложенности компонентов (не DOM-узлов!). См. официальзую документацию styled-components https://styled-components.com/docs/api#forwardedas-prop.