Question

我想在TypeScript中使用样式化组件，但是在安装依赖项（样式化组件的类型等）并将一个简单组件的扩展名更改为.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;
  }
`;

Answer 1

由于您的Login函数呈现了JSX，因此您应该将扩展名更改为.tsx。 .ts个文件不支持添加的JSX。如果styled-component文件中不包含JSX，则可以肯定使用.ts元素。

带TypeScript的样式化组件

1 个答案: