Question

拥有以下内容：

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：属性＆＃39; div＆＃39;类型＆＃34; typeof＆＃34; / root / node_modules / styled-comp ...＆＃39;上不存在。

更新

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

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

Answer 1

tsconfig中的

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

由于他们没有在他们的类型defs中导出名称空间，而是在界面本身，导入只需要更改为：

import styledComponents from "styled-components";

修改

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

但是当declarations为真且导出组件时它会失败，因为它尝试使用不在范围内的外部接口StyledComponentClass生成您自己的类型defs。 [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%;
`;

Answer 2

除了从“样式化组件”中提取样式外，最简单的方法是不导入任何内容：

    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不包含任何参数。

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

Answer 3

通过使用require导入它我必须避免错误：

const styledComponents = require('styled-components');

Answer 4

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

固定

rm -rf node_modules
npm install

使用样式组件

4 个答案: