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

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

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;