Styled-components with TypeScript

Question

I wanted to use styled-components with TypeScript, but after installing dependencies (types for styled-components, etc.) and after changing the extension of one simple component to .ts, it's informing me that my 'styled.div' component is declared but never read and I have error like this showing on line 8 -

'LoginStyled' refers to value but is being used as a type here.ts(2749)

With .js extension, everything works fine. Here is how component looks like:

  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;
  }
`;

does it work if you change the file extension to .tsx ?

Harald Gliebe
– Harald Gliebe

2020-07-16 02:28:47 +00:00
Commented Jul 16, 2020 at 2:28 — Harald Gliebe
– Harald Gliebe, Commented Jul 16, 2020 at 2:28
Yeah, that worked, thank you.

andriejka
– andriejka

2020-07-17 11:39:32 +00:00
Commented Jul 17, 2020 at 11:39 — andriejka
– andriejka, Commented Jul 17, 2020 at 11:39

Ioannis Potouridis · Accepted Answer · 2020-07-16 03:04:59Z

1

Since your Login function renders JSX you should change your extension to .tsx. .ts files don't support added JSX. You can definitely use styled-component elements in a .ts file if it doesn't include JSX.

answered Jul 16, 2020 at 3:04

Ioannis Potouridis

1,3366 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styled-components with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest