样式组件 - 如何防止将道具传递给扩展组件? [英] Styled Component - How to prevent a prop from being passed to the extended component?

问题描述

我正在扩展 Textarea 并且我希望 completed 可以被 StyledItemTextarea 而不是 Textarea 访问.我怎样才能做到这一点?

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

推荐答案

我找到了解决方案:

import Textarea from 'react-textarea-autosize';

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

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

这篇关于样式组件 - 如何防止将道具传递给扩展组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！