In this article, we will learn how to using styled-components in typescript in React.
Now, let’s first create a React application with the following command.
- npx create–react–app style-component —template typescript
We need to install some dependencies because styled-components doesn’t come with create-react-app.
- yarn add styled–components
Run the following commands once it’s finished installing:
- yarn add –D @types/styled–components
It’s now time to finish our project. We don’t need all of the files Create React App generates, so let’s get rid of them.
- Delete the logo files from the public folder.
- Change the title to whatever you like in the index.html file, then eliminate everything from the meta description to where the title tag begins.
- Delete all files except App.tsx and index.tsx from the source folder.
- Delete the lines importing index.css and reportWebVitals from index.tsx. Remove any webVitals-related lines as well.
- Delete everything in App.tsx except the sections where we import React and export the app.
My App.tsx page will look like this:
import * as React from "react";
import styled, { keyframes } from "styled-components";
import logo from "./assets/logo.svg";
import { colors, fonts } from "./styles";
const logoSpin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
const SApp = styled.div`
text-align: center;
`;
const SAppHeader = styled.header`
background-color: rgb(${colors.dark});
padding: 10px;
color: rgb(${colors.white});
`;
const SAppLogo = styled.img`
animation: ${logoSpin} infinite 20s linear;
margin-top: 10px;
height: 100px;
`;
const SAppTitle = styled.h3`
margin: 20px auto;
`;
const SAppIntro = styled.p`
margin: 40px auto;
font-size: ${fonts.size.large};
`;
class App extends React.Component {
public render() {
return (
<SApp>
<SAppHeader>
<SAppLogo src={logo} alt="logo" />
<SAppTitle>Welcome to React</SAppTitle>
</SAppHeader>
<SAppIntro>
To get started, edit <code>src/App.tsx</code> and save to reload.
</SAppIntro>
</SApp>
);
}
}
export default App;
My index.tsx page will look like this:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createGlobalStyle } from "styled-components";
import App from "./App";
import { globalStyle } from "./styles";
const GlobalStyle = createGlobalStyle`
${globalStyle}
`;
ReactDOM.render(
<>
<GlobalStyle />
<App />
</>,
document.getElementById("root")
);
My style.ts page will look like this:
export const colors = {
white: "255, 255, 255",
black: "0, 0, 0",
dark: "12, 12, 13",
grey: "169, 169, 188",
darkGrey: "113, 119, 138",
lightGrey: "212, 212, 212",
blue: "101, 127, 230",
lightBlue: "64, 153, 255",
yellow: "250, 188, 45",
orange: "246, 133, 27",
green: "84, 209, 146",
pink: "255, 51, 102",
red: "214, 75, 71",
purple: "110, 107, 233"
};
export const fonts = {
size: {
tiny: "10px",
small: "14px",
medium: "16px",
large: "18px",
h1: "60px",
h2: "50px",
h3: "40px",
h4: "32px",
h5: "24px",
h6: "20px"
},
weight: {
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800
},
family: {
OpenSans: '"Open Sans", sans-serif'
}
};
export const transitions = {
short: "all 0.1s ease-in-out",
base: "all 0.2s ease-in-out",
long: "all 0.3s ease-in-out",
button: "all 0.15s ease-in-out"
};
export const shadows = {
soft:
"0 4px 6px 0 rgba(50, 50, 93, 0.11), 0 1px 3px 0 rgba(0, 0, 0, 0.08), inset 0 0 1px 0 rgba(0, 0, 0, 0.06)",
medium:
"0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(50, 50, 93, 0.02), 0 5px 10px 0 rgba(59, 59, 92, 0.08)",
big:
"0 15px 35px 0 rgba(50, 50, 93, 0.06), 0 5px 15px 0 rgba(50, 50, 93, 0.15)",
hover:
"0 7px 14px 0 rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.08), inset 0 0 1px 0 rgba(0, 0, 0, 0.06)"
};
export const responsive = {
xs: {
min: "min-width: 479px",
max: "max-width: 480px"
},
sm: {
min: "min-width: 639px",
max: "max-width: 640px"
},
md: {
min: "min-width: 959px",
max: "max-width: 960px"
},
lg: {
min: "min-width: 1023px",
max: "max-width: 1024px"
},
xl: {
min: "min-width: 1399px",
max: "max-width: 1400px"
}
};
export const globalStyle = `
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700,800');
html, body, #root {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
font-family: ${fonts.family.OpenSans};
font-style: normal;
font-stretch: normal;
font-weight: ${fonts.weight.normal};
font-size: ${fonts.size.medium};
background-color: rgb(${colors.white});
color: rgb(${colors.dark});
overflow-y:auto;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
button {
border-style: none;
line-height: 1em;
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
[tabindex] {
outline: none;
width: 100%;
height: 100%;
}
a, p, h1, h2, h3, h4, h5, h6 {
text-decoration: none;
margin: 0;
padding: 0;
margin: 0.7em 0;
}
h1 {
font-size: ${fonts.size.h1}
}
h2 {
font-size: ${fonts.size.h2}
}
h3 {
font-size: ${fonts.size.h3}
}
h4 {
font-size: ${fonts.size.h4}
}
h5 {
font-size: ${fonts.size.h5}
}
h6 {
font-size: ${fonts.size.h6}
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
color: inherit;
outline: none;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box !important;
}
input {
-webkit-appearance: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
`;
