Javascript 所有样式化组件返回任何（@types/styled components）

我在使用样式化组件和VSCode时遇到了一个奇怪的问题。下面是我从样式化组件得到的任何组件，它们都返回任何

我以前让它工作过，但不知道什么时候，也不知道在返回所有组件的设置中有什么错误。我试图移回tslint config，删除/注释掉eslintrc文件中的所有规则，但也无法使其工作

令人惊讶的是，我尝试了我在项目中使用的类型，并且这些类型与原始设置一起工作

我尝试使用相同版本的样式化组件包，但仍然无法使其工作。任何帮助，或指导，看看这个问题将是非常欢迎的

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react/recommended',
    'prettier/@typescript-eslint',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    sourceType: 'module',
    ecmaFeatures: { jsx: true },
  },
  plugins: ['@typescript-eslint', 'react', 'react-native'],
  rules: {
    camelcase: 'off',
    'react/display-name': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/unbound-method': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-unsafe-call': 'off',
    '@typescript-eslint/no-unsafe-member-access': 'off',
    '@typescript-eslint/no-unsafe-return': 'off',
    '@typescript-eslint/no-misused-promises': [
      'error',
      {
        checksVoidReturn: false,
      },
    ],
    '@typescript-eslint/explicit-module-boundary-types': ['error', { allowArgumentsExplicitlyTypedAsAny: true }],
  },
  settings: {
    react: {
      pragma: 'React',
      version: 'detect',
    },
  },
  ignorePatterns: ['node_modules/**/*', 'docs/**/*', 'examples/**/*', 'lib/**/*'],
};

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "inlineSources": true,
    "jsx": "react",
    "lib": ["es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation"
          ]
        }
      }
    ],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "sourceRoot": "./src",
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015"
  },
  "include": [".eslintrc.js", "src/**/*.ts", "src/**/*.tsx"]
}

样式化d.ts

import 'styled-components';

declare module 'styled-components' {
  // tslint:disable-next-line
  export interface DefaultTheme {
    darkMode: boolean;
    background: string;
    lightBackground: string;
    grayBackground: string;
    darkBackground: string;
    heading: string;
    subheading: string;
    copy: string;
    stroke: string;
    underlay: string;
    map: string;
  }
}

我就是这样解决的- 在导航到项目内的样式化组件的类型文件后，我看到了以下错误：

node\u模块/提升机非反应静态/索引“”没有导出的成员“非反应静态”。ts

事实证明，我的包使用的是旧版本的非react static，它覆盖了样式化组件所使用的类型

---

升级这些包（在我的例子中是react-redux）解决了这个问题。

类型被悄悄地移动到@Types/styled components react-native。当然，更新其他依赖项仍然很好：）

---

参考资料：

Hi@jbr，你找到解决方案了吗？我也有同样的问题……没有，我还没有找到任何解决方案，当我在这里找到一些空闲时间相同的问题时，我会进一步挖掘：（我尝试了很多Typescript/

样式化组件的组合

/

@types/styled components

版本，但运气不好。我无法解释如何操作，但它又起作用了。我运行了最新版本的vscode、样式化组件和eslint依赖项。不确定发生了什么，但这可能是dependenc的内部问题制作此.Aw crud.的y希望找到解决方案。我的项目中确实存在一些与此问题相关的旧

eslint

依赖项，因此我将尝试从新的linting设置开始，看看这是否是根本原因。很高兴您修复了它！谢谢！！！在我的案例中，这是

重新组合

模块。

import 'styled-components';

declare module 'styled-components' {
  // tslint:disable-next-line
  export interface DefaultTheme {
    darkMode: boolean;
    background: string;
    lightBackground: string;
    grayBackground: string;
    darkBackground: string;
    heading: string;
    subheading: string;
    copy: string;
    stroke: string;
    underlay: string;
    map: string;
  }
}