Props doesn't exist? Using styled-component and typeScript, already implement `interface`

Question

this is my styled component

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'};
  `}
`;

it returns an error that said

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

I've tried to implement the suggestion on this other question to specify the props to pass to component

interface CategoryButton {
  selected?: boolean;
}

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

Nevertheless, the same error still appears. How can I get this to work?

Answer 1

You have to pass in selected in CategoryButton like this. It works same as props passing to child:

<CategoryButton selected={true}/>