Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

styled-components / Help

How to use dot notation(ex. Card.Title) in TypeScript?

How to use dot notation(ex. Card.Title) in TypeScript?

styled-components/Help · November 26, 2018 at 12:31pm

How to use dot notation(ex. Card.Title) in TypeScript?

styled-components / Help · November 26, 2018 at 12:31pm
import styled from 'styled-components'; import Header from './Header'; import Image from './Image'; import Text from './Text'; import Title from './Title'; const Card = styled.div` background: #ffffff; border-radius: 2px; margin: 5px 5px 10px; padding: 5px; position: relative; box-shadow: 2px 2px 4px 0px #cfd8dc; `; Card.Header = Header; Card.Image = Image; Card.Text = Text; Card.Title = Title; export default Card;
Source: https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28

Any idea how to do this in TypeScript, or more specifically define the Cards subcomponents?

November 27, 2018 at 7:16am

Hi. I think you can make for your parent element next interface:

interface ICard extends StyledComponentClass<
    ICardProps, 
    React.SFC<ICardProps>
>{
    Header?:  StyledComponentClass<
        IHeaderProps, 
        React.SFC<IHeaderProps>
    >;
    ...
}
Edited
  • reply
  • like

November 27, 2018 at 8:17am

Hi. I think you can make for your parent element next interface:

interface ICard extends StyledComponentClass<
    ICardProps, 
    React.SFC<ICardProps>
>{
    Header?:  StyledComponentClass<
        IHeaderProps, 
        React.SFC<IHeaderProps>
    >;
    ...
}

This looks like it should work!

A couple of questions though - where can i get the StyledComponentClass for. It won't import from styled-components and i don't see it anywhere in the type definitions. (there is a StyledComponent, StyledComponentBase and StyledComponentProps exported though.

The ICardProps and IHeaderProps should probably extend the StyledComponentsProps, but when i try to do that i get this error:

Generic type 'StyledComponentProps' requires 4 type argument(s).

Edited
  • reply
  • like

November 27, 2018 at 12:11pm

My example is based on v3.x.x. Maybe you have another version with another types (maybe).

  • reply
  • like

November 27, 2018 at 1:49pm

I'm using v4.1.1

  • reply
  • like

Log in or sign up to chat