1

具有以下内容：

tsconfig

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "lib",
    "lib": ["es2015","dom"]
    }
}

注意声明：true

和.tsx文件：

import * as styledComponents from "styled-components";

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;

当我tsc在终端上运行编译时，我得到：

错误 TS2339：类型“/root/node_modules/styled-comp ...”上不存在属性“div”。

更新

两种导入样式组件的方式都会发生错误

import styled from 'styled-components'
import * as styled from 'styled-components'
4

5 回答 5

6

declaration在 tsconfig 中只是告诉它在构建输出中为您自己的文件生成类型定义，而不是指定如何从其他人那里导入它们

由于他们不是在其类型定义中导出命名空间，而是接口本身，因此您只需将导入更改为：

import styledComponents from "styled-components";

编辑

经进一步调查，上述方法适用于declarations关闭或不导出组件时

但是，当它declarations为 true 并导出组件时，它会失败，因为它会尝试使用StyledComponentClass不在范围内的外部接口生成您自己的类型定义。 [ts] Exported variable 'Title' has or is using name 'StyledComponentClass' from external module "/blah/blah/node_modules/styled-components/typings/styled-components" but cannot be named.

要修复它，您还必须显式导入类类型定义以及默认值：

import styledComponents, { StyledComponentClass } from 'styled-components';

export const backColor = (props: MyProps) => props.theme.backColor;

export const Title = styledComponents.div`  
   text-align: center;
   background-color:${backColor};
   width: 100%;
`;
于 2017-08-31T21:43:07.030 回答
1

除了从“styled-components”导入样式之外，最简单的方法是：

    const StyledComponent = styled.div`
        background: black;
        color: white;
    `;

    const StyledComponentWithParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color) => (color ? "yellow" : "white")};
    `;

    const StyledComponentDefaultValueParams = styled.div<{ color?: string }>`
        background: yellow;
        color: ${(color = "white") => (color)};
    `;

StyledComponent不包含任何参数。

StyledComponentWithParamsand都包含一个参数，StyledComponentDefaultValueParams但后者color在箭头函数的参数列表中设置参数 , 的默认值。

于 2020-01-27T20:58:19.373 回答
0

对我来说，它是 node_modules 中损坏的类型文件。固定与

rm -rf node_modules
npm install
于 2021-02-28T17:36:46.827 回答
0

当我使用 VSCode 将 div 重命名为 Div （这是我命名我的样式组件）时，我遇到了这个错误。

我怀疑我的重命名可能已在某些样式组件/React 核心文件中生效，并且更改不会显示在 git 跟踪上，因为这些是 git 忽略的文件。因此，很容易错过。

我的解决方案是delete node_modules/再做npm install一次。

于 2022-02-11T16:00:44.697 回答
-1

通过使用 require 导入它，我可以避免错误：

const styledComponents = require('styled-components');
于 2017-08-31T21:43:50.963 回答