为什么配合styled-components使用styled-system时props无VSCode智能提示

出现该问题的核心原因是没有给组件显式声明属性类型，VSCode的代码智能提示服务无法识别styled-system动态注入的props和自定义的gap属性，可按以下方案修复：

方案1：TypeScript项目（推荐） #

• 首先安装依赖的类型包

npm i -D @types/styled-components @types/styled-system

• 修改组件代码，显式声明props类型：

import styled from 'styled-components';
import {
    space, color, layout, flexbox, border,
} from 'styled-system';
// 导入styled-system对应的类型定义
import { LayoutProps, SpaceProps, ColorProps, FlexboxProps, BorderProps } from 'styled-system';

// 组合类型：继承styled-system的属性 + 自定义gap属性
type FlexWrapperProps = LayoutProps & SpaceProps & ColorProps & FlexboxProps & BorderProps & {
  gap?: string | number;
}

// 给styled组件传入泛型指定props类型
const FlexWrapper = styled.div<FlexWrapperProps>`
    display: flex;
    gap: ${({ gap }) => gap || '10px'};
    ${layout};
    ${space};
    ${color};
    ${flexbox};
    ${border};
`;

export default FlexWrapper;

方案2：JavaScript项目 #

• 给组件添加JSDoc类型注解即可获得智能提示：

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

/**
 * @typedef {import('styled-system').LayoutProps & import('styled-system').SpaceProps & import('styled-system').ColorProps & import('styled-system').FlexboxProps & import('styled-system').BorderProps & {gap?: string|number}} FlexWrapperProps
 * @type {import('styled-components').StyledComponent<'div', any, FlexWrapperProps, never>}
 */
const FlexWrapper = styled.div`
    display: flex;
    gap: ${({ gap }) => gap || '10px'};
    ${layout};
    ${space};
    ${color};
    ${flexbox};
    ${border};
`;

export default FlexWrapper;

• 如果还是没有提示，可以在项目根目录添加jsconfig.json开启JS类型检查：

{
  "compilerOptions": {
    "checkJs": true
  },
  "include": ["src/**/*"]
}

通用排查步骤 #

如果配置完成后还是没有智能提示，可以执行以下操作：

• 确认VSCode已经安装官方的Styled Components插件
• 按Ctrl+Shift+P（Mac系统为Cmd+Shift+P），输入「TypeScript: Restart TS Server」重启语言服务
• 重启VSCode后再验证

内容的提问来源于stack exchange，提问作者Kirill Kazakov