Блог

Я написал компонент CallToAction следующим образом:

 const CallToAction = ({ text = "Default text" }) => (
  <S_CallToAction>{text}</S_CallToAction>
)
const S_CallToAction = styled.div`
  // Some styles...
`
export default CallToAction
 

Затем, когда я хочу использовать его в других компонентах и перегрузить его еще несколькими стилями, я теряю свой «текстовый» реквизит и предыдущие стили, которые я объявил в своем компоненте «CallToAction».
Это хорошо работает, когда я удаляю реквизит «as = {‘button’}».

Вот что я сделал, когда захотел использовать его в другом компоненте, перегрузив его:

 import CallToAction from "components/common/callToAction"
 

…

         <S_ProductButton
          as={'button'}
          text={`I want my text to display and my style being inherited`}
        />
 

…

 const S_ProductButton = styled(CallToAction)`
      width: 50%;
      margin: auto;
      min-width: 300px;
`
 

Может ли кто-нибудь объяснить мне, почему добавление реквизита «as» приводит к перегрузке моего стиля, а текстовый реквизит больше не работает?
Кроме того, как вы справляетесь с такой ситуацией?

Примечание: я новичок в стилизованных компонентах… Я мог бы экспортировать «S_CallToAction» (только стили) и использовать его в других моих компонентах, но хорошее ли это решение? Для меня это нарушило бы идею «один компонент = один стиль», которая является идеей, лежащей в основе стилизованных компонентов…

Хорошо, я наконец-то нашел решение своей проблемы! Есть еще одна опора для моего варианта использования, которая называется «forwardedAs«, используемая как опора «as», и это заставляет мой перегруженный стилизованный компонент работать по назначению.

Мне пришлось распространить весь реквизит через {…props} на мой компонент CallToAction (который изначально имеет стиль.a)

 const CallToAction = ({ text = "Text", href, ...props}) => (
  <S_CallToAction href={href ? href : null} {...props}>{text}</S_CallToAction>
)
 

А затем в моем расширенном компоненте мне пришлось использовать forwardedAs:

            <S_ProductButton
              forwardedAs={'button'}
              text={`I have my text and my styles inherited`}
            /> 
 

Вот подробности о проблеме, с которой я столкнулся, и почему styled-components действует так: https://github.com/styled-components/styled-components/issues/1981