为什么在使用带有样式组件的样式系统时在智能感知中看不到道具？答案

【问题标题】：Why I can't see props in intellisense when using styled-system with styled components?为什么在使用带有样式组件的样式系统时在智能感知中看不到道具？
【发布时间】：2021-12-31 16:51:15
【问题描述】：

所以，首先，我这样声明我的组件：

import styled from 'styled-components';
import {
    space, color, layout, flexbox, border,
} from 'styled-system';

const FlexWrapper = styled.div`
    display: flex;
    gap: ${({ gap }) => gap || '10px'};
    ${layout};
    ${space};
    ${color};
    ${flexbox};
    ${border};
`;

export default FlexWrapper;

那我就用它吧：

return (
        <FlexWrapper flexDirection='column' width={width}>
            <FlexWrapper flexDirection='row' gap='30px'>
                {filters}
            </FlexWrapper>
        </FlexWrapper>
    );

最终，道具工作正常，但 vscode intellisense 根本看不到它。有什么解决办法可以解决吗？

【问题讨论】：

标签： reactjs styled-components styled-system

【解决方案1】：

我在代码编辑器和 IDE 方面遇到了这个问题，我不理会它们如果你不使用 Typescript，我强烈建议你使用 Typescript 来提高你的开发速度。

npx create-react-app --template typescript //  :)

如果有用请点赞

【讨论】：