Typing styled-components props: Valid string values according to what's available in theme

ColorThemeTypedExample.styled.ts

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

theme.ts

export const theme = {
	colors: {
		primary: '#B48FFF',
		secondary: '#87D9FF',
		accent: '#9EFFC1'
	},
    // ... More theme settings
}

types.ts

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;