set types for styled component

src/Router.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { About } from './components/About';
-import { Home } from './containers/Home';
+import { Home } from './containers/home';
 
 const Router: FC = () => (
   <Switch>

src/components/button.tsx

@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonProps {
+  readonly primary: boolean;
+}
+
+export const Button = styled.button<ButtonProps>`
+  background: transparent;
+  border-radius: 3px;
+  border: 2px solid ${(props) => props.theme.colors.primary};
+  color: ${(props) => props.theme.colors.primary};
+  margin: 0 1em;
+  padding: 0 0.25em 1em;
+
+  ${(props) =>
+    props.primary &&
+    css`
+      background: ${(props) => props.theme.colors.primary};
+      color: white;
+    `}
+`;

src/components/container.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  text-align: center;
+`;

src/containers/Home.tsx

@@ -1,9 +0,0 @@
-import React, { FC } from 'react';
-
-import { listTodos } from '../core/services/todo';
-import { TodoList } from '../components/TodoList';
-
-export const Home: FC = () => {
-  const todos = listTodos();
-  return <TodoList todos={todos} />;
-};

src/containers/home/TodoList.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import Todo from '../core/models/todo';
+import Todo from '../../core/models/todo';
 
 interface Props {
   todos: Todo[];

src/containers/home/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { TodoList } from './TodoList';
+import { Button } from '../../components/button';
+
+import Todo from '../../core/models/todo';
+import { listTodos } from '../../core/services/todo';
+import { Container } from '../../components/container';
+
+export const Home: FC = () => {
+  const todos: Todo[] = listTodos();
+
+  return (
+    <div>
+      <h1>Your tasks</h1>
+      <p>Hi there!</p>
+      <TodoList todos={todos} />
+      <Container>
+        <Button primary onClick={() => console.log('Clicked Normal Button')}>
+          Normal Button
+        </Button>
+        <Button primary onClick={() => console.log('Clicked Primary Button')}>
+          Primary Button
+        </Button>
+      </Container>
+    </div>
+  );
+};

src/core/theme/index.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+
+export const myTheme: DefaultTheme = {
+  borderRadius: '5px',
+  colors: {
+    primary: 'palevioletred',
+    secondary: 'magenta'
+  }
+};

src/core/theme/styled.d.ts

@@ -0,0 +1,11 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    borderRadius: string;
+    colors: {
+      primary: string;
+      secondary: string;
+    };
+  }
+}

src/index.tsx

@@ -4,12 +4,16 @@ import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { ThemeProvider } from 'styled-components';
+import { myTheme } from './core/theme';
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <ThemeProvider theme={myTheme}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );