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?

Shubham Verma · Accepted Answer · 2020-08-28 05:14:18Z

1

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

<CategoryButton selected={true}/>

answered Aug 28, 2020 at 5:14

Shubham Verma

5,0641 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related