样式化-带打字的组件 [英] Styled-components with TypeScript

问题描述

我想将样式组件与类型脚本一起使用，但在安装依赖项(样式组件的类型等)之后。在将一个简单组件的扩展名更改为.ts后，它通知我，我的‘style led.div’组件已声明但从未读取，并且我的错误如下所示，如第8行所示-

"LoginStyled值"引用了值，但被用作类型 此处.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;
  }
`;

jsx

因为Login函数呈现推荐答案，所以您应该将扩展名更改为.tsx。.ts文件不支持添加的JSX。如果.ts文件不包含JSX，您肯定可以在styled-component文件中使用styled-component元素。

这篇关于样式化-带打字的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！