menu

styled-components

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

Channels
Team

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

November 26, 2018 at 12:31pm

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

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

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

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

  • reply
  • like

I'm using v4.1.1

  • reply
  • like