使用 TypeScript 的样式化组件答案

【问题标题】：Styled-components with TypeScript使用 TypeScript 的样式化组件
【发布时间】：2020-11-05 15:17:15
【问题描述】：

我想在 TypeScript 中使用 styled-components，但是在安装依赖项（styled-components 的类型等）并将一个简单组件的扩展名更改为 .ts 之后，它告诉我我的“styled.div”组件已声明但从未读取，我在第 8 行显示了这样的错误 -

'LoginStyled' 指的是值，但被用作类型 here.ts(2749)

使用 .js 扩展名，一切正常。以下是组件的外观：

  import React from "react";
import { Card, CardTitle } from "reactstrap";
import styled from "styled-components";
import LoginForm from "./LoginForm";

function Login({toggleAlert}) {
  return (
    <LoginStyled>
      <Card body inverse className="login-window">
        <CardTitle>
          <h2>Log in</h2>
        </CardTitle>
        <LoginForm toggleAlert={toggleAlert} />
      </Card>
    </LoginStyled>
  );
}

export default Login;

const LoginStyled = styled.div`
  .login-window {
    background-color: #333;
    border-color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  h2 {
    text-align: center;
  }
`;

【问题讨论】：

把文件扩展名改成.tsx能用吗？
是的，成功了，谢谢。

标签： reactjs typescript styled-components

【解决方案1】：

由于您的 Login 函数呈现 JSX，您应该将扩展名更改为 .tsx。 .ts 文件不支持添加的 JSX。如果 .ts 文件不包含 JSX，您绝对可以在 styled-component 文件中使用它。

【讨论】：