Блог

Главная - Вопросы по программированию - Вложенные реквизиты в стилизованных компонентах, выдающие ошибку Typescript

Вложенные реквизиты в стилизованных компонентах, выдающие ошибку Typescript

#reactjs #typescript #styled-components

#reactjs #typescript #стилизованные компоненты

Вопрос:

Я пытаюсь вызвать prop внутри styled-component, но он выдает мне ошибку :

 [ts] Property 'color' does not exist on type 'ThemeProps<any>'.

Вот код с проблемой:

   const ButtonContainer = styled.button`
  border-radius: 4px;
  padding: ${theme.s2};
  border: 2px solid ${props => props.color};
  background: ${props => props.color};
  color: ${theme.textDark};

  ${(props: { secondary?: boolean }) =>
    props.secondary amp;amp;
    css`
      background: none;
      color: ${props => props.color};
      }
    `}
`;

С ошибкой, отображаемой в последнем экземпляре props.color.

Есть идеи, как правильно ввести этот экземпляр? Я предполагаю, что это что-то для

 ${(props: { secondary?: boolean })

Версия Typescript 3.3.3333 и стилизованные компоненты 4.1.3

Спасибо

Ответ №1:

Попробуйте следующее:

 color: ${(props: {color: string }) => props.color};

Надеюсь, это поможет. 🙂