道具不存在？ 使用 styled-component 和 typeScript，已經實現了`interface`

Question

這是我的樣式組件

import React from 'react';
import styled, {css} from 'styled-components';

const CategoryButton = styled(Button).attrs({
  variant: 'outlined',
})`
  ${({ theme }) => css`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: ${theme.spacing(2)}px ${theme.spacing(4)}px;
    background-color: ${(props) =>
      props.selected ? theme.colors.primary.main : theme.colors.background};
    color: ${(props) =>
      props.selected ? theme.colors.background : theme.colors.primary.main};
    border-color: ${(props) =>
      props.selected ? theme.colors.primary.main : '#c8c8c8'};
  `}
`;

它返回一個錯誤，說

• Property 'selected' does not exist on type 'ThemeProps<DefaultTheme>'

我試圖實施關於這個其他問題的建議，以指定要傳遞給組件的道具

interface CategoryButton {
  selected?: boolean;
}

const CategoryButton = styled(Button).attrs({
  variant: 'outlined',
})<CategoryButton>`
  ${({ theme }) => css`
    ...
  `}
`;

盡管如此，同樣的錯誤仍然出現。 我怎樣才能讓它發揮作用？

Answer 1

您必須像這樣傳入CategoryButton中的selected 。 它的工作原理與傳遞給孩子的道具相同：

<CategoryButton selected={true}/>