I sometimes get pretty far into a web project and wish I had supported theming (or just done better CSS management in general) from the beginning. There are many component libraries (i.e., Material UI, etc…) that provide various UI elements with features that enhance basic HTML. These libraries usually also have their own theming mechanisms in place. Using styled-components as described in this article is fully compatible with Material UI and its theming approach. You can use the two hand in hand to enhance your app’s appearance.

When starting a new app, I recommend building a mini-design-system (a component library) for use within the app (assuming you aren’t already using an external design system). This just means defining some base components with specified styling and behaviors that can be used throughout your app. For example, you can create PrimaryButton React component that is always blue, 150px in width, (or whatever you want). I often see on large enterprise projects, that an app will use a library like Material UI, but specify the same style parameters all over the place like this:

<Button variant=”outlined” size=”small” color=”primary”></Button>

If that’s how 90% of your buttons will look, don’t repeat yourself (DRY) and create a reusable component.

What we will learn:

1. How to create a new React app using TypeScript
2. How to use styled-components
3. How to use Redux to globally change the theme in your app

All the code in this tutorial is on GitHub here:

ezrabowman/react-theme-demo

This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…

github.com

---

The first thing we need to do is create the React app. I always use TypeScript, so I’ll start with that template. I will also use yarn instead of npm. If you are a javascript or npm purist, that’s ok. You will able to do all the things in this tutorial, although with slightly different syntax.

1. Create the React App

> yarn create react-app react-themes --template typescript

2. Test it out

> cd react-themes 
> yarn start

Open your browser to http://localhost:3000. This might happen automatically for you.

Success! Our app is running.

3. Install styled components

> yarn add styled-components --save 
> yarn add @types/styled-components --dev

4. Create a styled H1 component by modifying the App.tsx file as follows:

import React from 'react';
import styled from 'styled-components';
import logo from './logo.svg';
import './App.css';
const SytledH1 = styled.h1`
  color: red;
`;
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <SytledH1>React Themes Demo</SytledH1>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}
export default App;

Let’s make the header text red so that it’s obvious our changes are taking effect. The styled-components package makes it easy to customize elements using standard CSS syntax. It also provides the added benefit of dynamically changing the CSS based on React props, which we will see in a moment. If all goes well you should see this:

5. Using styled-components, you can also set global styles that will apply throughout the app, not just on a single component. Add the following to the App.tsx file to change the background color. We will also dynamically control this in the next few steps.

# change the styled-components import
import styled, { createGlobalStyle } from 'styled-components';

# add a global style
export const GlobalStyle = createGlobalStyle`
  body {
    background-color: white;
  }
`;
# insert the global style in the App component
function App() {
  return (
    <div className="App">
      <GlobalStyle/>
      <header className="App-header">
        <SytledH1>React Themes Demo</SytledH1>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

6. We also need to delete some of the default stylings from the boilerplate create-react-app. Delete the background-color and color lines from the App.css file, so they don’t overrule our new global styles.

.App-header {
  background-color: #282c34; <- DELETE THIS
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white; <- DELETE THIS
}

#web-development #web-design #react