Styling in React with Styled Components and TypeScript

Overview

We will explore how to use Styled Components to style React components in a type-safe manner by using TypeScript in conjunction with Styled Components.

Before we start, for anyone who is new to React or is still learning as a beginner, I highly recommend that you read the following article How to Get Started with React TypeScript

Installing Dependencies

The first step is to install the necessary packages:

npm install styled-components @types/styled-components

Creating Styled Components

Use the styled function from Styled Components to define styled-components. TypeScript provides type safety for styles.

//Creating Styled Components with TypeScript in React
import styled from 'styled-components';

interface ButtonProps {
  primary?: boolean;
}

const StyledButton = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? 'green' : 'white')};
  color: ${(props) => (props.primary ? 'white' : 'black')};
  padding: 10px;
  border: 1px solid ${(props) => (props.primary ? 'green' : 'black')};
`;

export default StyledButton;

Using Styled Components in React

We can incorporate styled components into your React components.

// We are using Styled Components in React with TypeScript
import React from 'react';
import { ThemeProvider } from 'styled-components';
import StyledButton from './Components/StyledButton';
import StyledAlert from './Components/StyledAlert';
import GlobalStyle from './Components/GlobalStyle';
import Theme from './Components/Theme';

const App: React.FC = () => {
  return (
    <ThemeProvider theme={Theme}>
    <div>
       <GlobalStyle />
      <h1>Styling in React with Styled Components</h1>
      <div>
      <h2>Styling Button in React with Styled Components</h2>
      <StyledButton>Default Button</StyledButton>
      <StyledButton primary>Primary Button</StyledButton>
       </div>
      <div>
        <h2>Styling Alert in React with Styled Components</h2>
      <StyledAlert type="success">Success Message</StyledAlert>
      <StyledAlert type="error">Error Message</StyledAlert>
        </div>
         <div>
        <h2>Styling Themes in React with Styled Components</h2>
        <p style={{ color: Theme.colors.primary }}>Primary Text</p>
        <p style={{ color: Theme.colors.secondary }}>Secondary Text</p>
      </div>
    </div>
    </ThemeProvider>
  );
};
export default App;

Passing Props to Styled Components

The styling of a component can be dynamic by accepting props.

//  we are Passing Props to Styled Components with TypeScript in React
import styled from 'styled-components';

interface AlertProps {
  type: 'success' | 'error';
}

const StyledAlert = styled.div<AlertProps>`
  background-color: ${(props) => (props.type === 'success' ? 'green' : 'red')};
  color: white;
  padding: 10px;
  border-radius: 4px;
`;

export default StyledAlert;

Global Styles with TypeScript

By using createGlobalStyle, you can define global styles that are type-safe.

//  We are using Global Styles with TypeScript in React
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
 body {
    font-family: 'Arial', sans-serif; 
    background-color: #f0f0f0; 
    margin: 0;  
    padding: 0;  
  }
`;

export default GlobalStyle;

Theming with TypeScript

Theming with TypeScript can be leveraged in Styled Components.

//We are using Theming with TypeScript in React
import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
  fonts: {
    main: 'Arial, sans-serif',
  },
};

export default theme;

Summary

React developers can create maintainable and type-safe styles with Styled Components and TypeScript. Explore styling different components, passing dynamic styles with props, and tying them together to create a consistent design system by combining Styled Components with TypeScript. We can boost the styling experience in your React applications by combining Styled Components and TypeScript.

I have added code examples I used in this article to my GitHub Repository https://github.com/ziggyrafiq/react-styling-with-styled-components-typescript also please do not forget to follow me on LinkedIn https://www.linkedin.com/in/ziggyrafiq/ .