Using Styled-Components In TypeScript In React.js

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 createreactapp style-component template typescript

We need to install some dependencies because styled-components doesn’t come with create-react-app.

  • yarn add styledcomponents

Run the following commands once it’s finished installing:

  • yarn add D @types/styledcomponents

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.

  1. Delete the logo files from the public folder.
  2. 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.
  3. Delete all files except App.tsx and index.tsx from the source folder.
  4. Delete the lines importing index.css and reportWebVitals from index.tsx. Remove any webVitals-related lines as well.
  5. 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;
  }
`;

Output:


Submit a Comment

Your email address will not be published.

Subscribe

Select Categories