Skip to content

Instantly share code, notes, and snippets.

Last active April 7, 2023 01:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Typing styled-components props: Valid string values according to what's available in theme
import styled from 'styled-components';
import { ThemeColor } from '../../types';
interface ButtonProps {
color: ThemeColor
export const StyledButton = styled.button<ButtonProps>`
background: ${({ theme, color }): string => theme.colors[color]};
// more styles
&:hover, &:focus, &:active {
// Styles
export const theme = {
colors: {
primary: '#B48FFF',
secondary: '#87D9FF',
accent: '#9EFFC1'
// ... More theme settings
import { theme } from './theme';
// in this example, ThemeColor is equivalent to "primary" | "secondary" | "accent",
// but if we add another colour to the theme.colors object, it automatically becomes available to every styled-component using this type
export type ThemeColor = keyof typeof theme.colors;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment