How to pass props to styled component when using theme?

Question

I want to use the color prop I get from Button component to use it for background color using styled component theme.

import React from "react"; import styled from "styled-components"; const StyledButton = styled("button")<{ color: string; padding: string; }>` background: ${(props) => props.theme.colors.primary}; outline: none; box-shadow: none; border: none; padding: ${(props) => props.padding}; border-radius: 5px; color: white; font-size: ${(props) => props.theme.fontSizes.small}; margin: 0 10px; `; interface Props extends React.ComponentPropsWithoutRef<"button"> { color?: string; padding?: string; } const Button = ({ children, color, padding }: Props) => { return ( <StyledButton color={color!} padding={padding!}> {children} </StyledButton> ); }; export default Button;

Theme:

import { DefaultTheme } from "styled-components"; const theme: DefaultTheme = { colors: { primary: "#5A8DEE", boldPrimary: "#274d8c", lightPrimary: "#dae3f5", green: "#5CCf4C", gray: "#F2F4F4", white: "#FFFFFF", text: "#5f5f63", lightText: "#878791", }, fontSizes: { extraSmall: "0.75rem", small: "1rem", medium: "1.25rem", large: "1.50rem", }, }; export default theme;

Like when I get primary from Button props, I want it to get the color codes from the theme context I made.

Yeah I do. background: ${(props) => props.theme.colors.primary}; and font-size: ${(props) => props.theme.fontSizes.small}; works pretty fine. — Arshia Arsh1a Faraji
– Arshia Arsh1a Faraji, Commented Apr 3, 2021 at 5:29
So if accessing the theme is working what is the question/issue then? Sorry, I'm just not understanding what you are asking for. — Drew Reese
– Drew Reese, Commented Apr 3, 2021 at 5:32
So if you look at button component, its getting props that I want to use them inside styled component. So like if the prop I get is primary or any other color, I want to use it inside ${(props) => props.theme.colors.primary};. I can do conditional but doing it for all +10 colors is messy. — Arshia Arsh1a Faraji
– Arshia Arsh1a Faraji, Commented Apr 3, 2021 at 5:34
What is primary? The props.theme.colors.primary? It's passed in the theme prop which you said is working. Are you saying your theme has multiple theme.color properties and you want to specify which from a passed prop? — Drew Reese
– Drew Reese, Commented Apr 3, 2021 at 5:36

Drew Reese · Accepted Answer · 2021-04-03 05:42:58Z

If I'm understanding your question correctly you've several theme colors and you want to specify which to use from a prop passed to a component.

Given the theme colors:

colors: { primary: "#5A8DEE", boldPrimary: "#274d8c", lightPrimary: "#dae3f5", green: "#5CCf4C", gray: "#F2F4F4", white: "#FFFFFF", text: "#5f5f63", lightText: "#878791", }

You can specify a color prop:

interface Props extends React.ComponentPropsWithoutRef<"button"> { color?: string; padding?: string; }

In the styled component use the passed color prop to access into your theme

const StyledButton = styled("button")<{ color: string; padding: string; }>` background: ${(props) => props.theme.colors[props.color]}; // <-- access by dynamic key outline: none; box-shadow: none; border: none; padding: ${(props) => props.padding}; border-radius: 5px; color: white; font-size: ${(props) => props.theme.fontSizes.small}; margin: 0 10px; `; const Button = ({ children, color, padding }: Props) => { return ( <StyledButton color={color} padding={padding!}> {children} </StyledButton> ); };

Then specify the color you want to use:

<Button color="primary" /> <Button color="boldPrimary" /> ...etc...

Collectives™ on Stack Overflow

How to pass props to styled component when using theme?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related