Styled Component - How to prevent a prop from being passed to the extended component?

问题

I am extending Textarea and I want completed to be accessed by StyledItemTextarea but not Textarea. How can I achieve this?

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} />;

回答1:

Maybe like this:

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

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

or

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

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

回答2:

I found a solution:

import Textarea from 'react-textarea-autosize';

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

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

来源：https://stackoverflow.com/questions/50075277/styled-component-how-to-prevent-a-prop-from-being-passed-to-the-extended-compo