以使用 typescript 创建的create-react-app应用程序为例：

npx create-react-app myapp --template typescript
cd myapp
npm install styled-components@5.0.1

然后将样式化组件添加到 typescript 文件MyButton. tsx中。

import React from 'react';
import styled from 'styled-components';  // <<<<< THIS LINE CAUSES ERROR

const MyButtonStyle = styled.button`
  background: #9590eb;
  border-radius: 3px;
  border: none;
  color: white;
`;

/**
 * MyButton is a wrapper around a Button component.  Props/arguments are:
 * onClick(event:object) => void
 * style: Pass style onto <button> element
 */
function MyButton(props:any) {
    return (
        <MyButtonStyle style={props.style} type="button" onClick={props.onClick}>{props.children}</MyButtonStyle>
    );
}

export default MyButton;

我得到了错误

TypeScript error in .../MyButton.tsx(2,20): Could not find a declaration file for module 'styled-components'. '.../myapp/node_modules/styled-components/dist/styled-components.cjs.js' implicitly has an 'any' type.

为了解决这个问题，我将文件重命名为 *.jsx，问题就消失了。
我刚刚学习 typescript ，所以我的想法是我需要安装一个 typescript 库来支持styled-components，但我还没有弄清楚如何做到这一点（尚未）。

搜索

在寻找解决方案时，我遇到了以下问题，但他们没有回答这个问题。

• Styled-components with TypeScript-这是文件命名问题（*.ts到 *.tsx）。
• Using styled components with Typescript, prop does not exist?
• 将样式化组件与 prop 和TypeScript一起使用