How to pass props to styled component when using theme? - reactjs

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.

Answer 1

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...