reactjs - Hvordan sende props til en styled-komponent når man bruker tema?

Jeg vil bruke color-propen jeg får fra Button-komponenten for å bruke den som bakgrunnsfarge ved hjelp av styled component-temaet.

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;

Tema :

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;

Akkurat når jeg får primary fra Button-props, vil jeg at den skal hente fargekodene fra temakonteksten jeg laget.

Svar #1

Hvis jeg forstår spørsmålet ditt riktig, har du flere temafarger, og du vil spesifisere hvilken du skal bruke fra en prop sendt til en komponent.

Gitt temaets farger:

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

Du kan spesifisere en color-prop:

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

I den stiliserte komponenten bruker du den sendte color-egenskapen for å få tilgang til temaet ditt

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

Spesifiser deretter fargen du vil bruke:

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

Relaterte artikler