如何将Styled-Component主题变量作为属性传递给React组件？

Got it, let's figure out how to make your <Text color="blacks[1]" /> component work seamlessly with your existing theme setup. The core idea is to parse that string prop and map it to the corresponding color value in your theme. Here's a step-by-step implementation:

1. Create a Color Parsing Utility Function #

First, we'll build a helper function that takes the color prop string and your theme, then extracts the correct color value. This handles the array index syntax like blacks[1] while adding fallbacks for edge cases:

const parseColorProp = (colorProp, theme) => {
  // Split the prop into color key and index part (e.g., "blacks[1]" → ["blacks", "1]"])
  const [colorKey, indexSegment] = colorProp.split('[');
  
  // Case 1: No index provided (for future single-color theme keys like "primary")
  if (!indexSegment) {
    // Fallback to the prop itself if the theme doesn't have the key (supports direct hex/rgb values)
    return theme.colors[colorProp] || colorProp;
  }
  
  // Case 2: Array index provided
  const colorIndex = parseInt(indexSegment.replace(']', ''), 10);
  // Safely access the array, fallback to original prop if the index is invalid
  return theme.colors[colorKey]?.[colorIndex] || colorProp;
};

2. Build Your Reusable Text Component #

Integrate this helper into your styled Text component. We'll leverage the theme prop provided by styled-components and your custom color prop:

import styled from 'styled-components';

// Include the parseColorProp function here, or import it from a utils file

const Text = styled.span`
  color: ${({ theme, color }) => parseColorProp(color, theme)};
  // Add any default styles your Text component needs
  font-size: 1rem;
  line-height: 1.5;
`;

export default Text;

3. Use the Text Component #

Now you can use it exactly how you wanted, plus it supports direct color values as a fallback for flexibility:

// Uses theme.colors.blacks[1] → "#2E2E34"
<Text color="blacks[1]">This text uses your theme's second black shade</Text>

// Fallback to direct color values when needed
<Text color="#ff0000">This is bright red text</Text>
<Text color="slategray">This is slate gray text</Text>

Bonus: Add Type Safety (Optional) #

If you're using TypeScript, you can add types to enforce valid color props and prevent typos:

// Restrict to valid indexes from your blacks array
type ValidBlackShade = `blacks[${0 | 1 | 2}]`;
// Allow custom color strings too
type ColorProp = ValidBlackShade | string;

interface TextProps {
  color?: ColorProp;
}

const Text = styled.span<TextProps>`
  color: ${({ theme, color }) => color ? parseColorProp(color, theme) : 'inherit'};
`;

This ensures you can only pass valid indexes for your blacks array, avoiding mistakes like blacks[3] which would be out of bounds.

内容的提问来源于stack exchange，提问作者AnApprentice