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};
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
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}>
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 }