Стилизованный компонент - Как предотвратить передачу пропеллера в расширенный компонент?

Question

Я расширяю Textarea и хочу, чтобы completed был доступен для StyledItemTextarea, но не Textarea. Как мне этого добиться?

import Textarea from 'react-textarea-autosize';

const TextareaAutosizeSC = styled(Textarea)`
    ...
`;

const StyledItemTextarea = TextareaAutosizeSC.extend`
    color: ${({ completed }) => completed ? '#ccc' : '#fff'};
`;

const MyTextarea = ({ completed }) => <StyledItemTextarea completed={completed} />;

Answer 1

Я нашел решение:

import Textarea from 'react-textarea-autosize';

const StyledItemTextarea = styled(({ completed, ...rest }) => <Textarea {...rest} />)`
    color: ${({ completed }) => completed ? '#ccc' : '#fff'};
`;

const MyTextarea = ({ completed }) => <StyledItemTextarea completed={completed} />;

Answer 2

Может быть так:

const TextareaAutosizeSC = ({ completed, ...rest }) => {
  const TextArea = styled(Textarea)`
    ...
  `;

  return <TextArea {...rest} />
}

или

const TextareaAutosizeSC = styled(Textarea)`
    ...
`;

const TextAreaWithoutSomeProps = ({ completed, ...rest }) => <TextareaAutosizeSC {...rest} />