Notes

Theming styled-components in React

Edit on GitHub

ReactJS
2 minutes
1npm i styled-components styled-theming

if you have a Typescript project

1npm i @types/styled-theming
 1// App.js
 2
 3import React from 'react'
 4import { ThemeProvider } from 'styled-components'
 5
 6export default function App() {
 7  return(
 8    <ThemeProvider theme={{ mode: 'light' }}>
 9      {/* rest of your app */}
10    </ThemeProvider>
11  )
12}

You can style variations of the same button with theme.variants()

 1import styled from 'styled-components';
 2import theme from 'styled-theming';
 3
 4const backgroundColor = theme.variants("mode", "kind", {
 5  default: { light: "#123456", dark: "#123456" },
 6  primary: { light: "#123456", dark: "#123456" },
 7  success: { light: "#123456", dark: "#123456" },
 8  danger: { light: "#123456", dark: "#123456" },
 9  warning: { light: "#123456", dark: "#123456" },
10})
11
12const Button = styled.button`
13  background-color: ${backgroundColor};
14`
15
16Button.propTypes = {
17  kind: PropTypes.oneOf(["default", "primary", ...]),
18};
19
20Button.defaultProps = {
21  kind: "default",
22};

Props

Here, default, primary, danger etc. are props that you can pass to your Button, and the styles will change based on what prop you passed.

You need to have a default prop when defining multiple variations

kind here is a prop name. You can call it whatever, e.g. variant

Proptypes

If you are using Typescript with React, your propTypes would probably be a Typescript type

1type Props = Readonly<{
2  kind?:
3    | 'default'
4    | 'primary'
5    | 'success'
6    | 'danger'
7    | 'warning'
8}>

styling different states

You can have nested styles for the state, similar to Sass

 1const StyledButton = styled.button`
 2  background-color: ${backgroundColor};
 3  color: ${textColor};
 4  padding: 0 8px;
 5  border-radius: 4px;
 6  box-shadow: 2px 2px rgba(0, 0, 0, 0.05);
 7  border: 3px solid ${backgroundColor};
 8
 9  :hover {
10    background-color: ${backgroundColorHover};
11  }