Intro With Styled Systems

This intro is based with React.

Quickstart with TypeScript

yarn add styled-system styled-components
yarn add --dev @types/styled-system @types/styled-components
copy

TypeScript Setup

With the above installed, you have one extra step to accomplish: adding styled.d.ts declartion to defined the theme and creating a theme file.

// styled.d.ts
// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

// my-theme.ts
import { DefaultTheme } from 'styled-components';

const myTheme: DefaultTheme = {
  borderRadius: '5px',

  colors: {
    main: 'cyan',
    secondary: 'magenta',
  },
};

export { myTheme };
copy

Create Components

Create a simple Box component:

import styled from 'styled-components';
import { color } from 'styled-system';

const Box = styled.div`
  ${color}
`;

export default Box;
copy