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

Question

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

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 智能感知根本看不到它。有什么解决办法吗？

Answer 1

我对代码编辑器和 IDE 有这个问题，我没有管它们如果你没有使用 Typescript，我强烈建议你使用 Typescript 来提高你的开发速度。

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

如果有用请点赞

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

Why I can't see props in intellisense when using styled-system with styled components?

reactjs

styled-components

styled-system