typescript Dot Notation styled-components

FullPageLayout.tsx

import * as React from 'react';
import styled from 'styled-components';

const FullPageLayout = styled<any>(styled.div``)`
  display: flex;
  flex-direction: column;
`;

interface HeaderProps {
  fixed?: boolean;
}

const Header = styled<HeaderProps>(({ fixed, ...rest }) => <header {...rest} />)`
  background-color: red;
`;

const Main = styled<any>(styled.main``)`
  background-color: yellow;
`;
const Footer = styled<any>(styled.footer``)`
  background-color: green;
`;

interface FullPageLayoutProps {
  children: any;
}

const FullPageLayoutWrapper = ({ children, ...rest }: FullPageLayoutProps) => (
  <FullPageLayout {...rest}>{children}</FullPageLayout>
);

FullPageLayoutWrapper.Header = Header;
FullPageLayoutWrapper.Main = Main;
FullPageLayoutWrapper.Footer = Footer;

export default FullPageLayoutWrapper;