如何根据用户输入实现Styled Components全局主题对象动态化？

核心逻辑 #

把静态的颜色配置与主题对象改为 React 状态管理，让颜色变更能自动触发主题更新，再通过 ThemeProvider 传递动态主题，使所有关联组件同步响应样式变化。

具体实现步骤 #

1. 重构顶层组件，用状态维护颜色与主题 #

将原有的静态配置改为组件内的状态，动态生成主题对象：

import { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import App from './App';

// 初始颜色配置
const initialCustomCol = {
  primary: "#fff",
  secondary: "#ccc",
  tertiary: "#3c71c6",
};

function Root() {
  // 用 useState 管理颜色配置状态
  const [customCol, setCustomCol] = useState(initialCustomCol);

  // 基于当前颜色配置动态生成主题
  const themes = {
    bg: {
      default: {
        bg: customCol.primary
      },
    },
    button: {
      bg: customCol.secondary
    }
  };

  // 更新指定颜色项的函数
  const updateColor = (colorKey, newColor) => {
    setCustomCol(prev => ({
      ...prev,
      [colorKey]: newColor
    }));
  };

  return (
    <ThemeProvider theme={themes}>
      {/* 将更新函数传递给子组件，用于触发颜色变更 */}
      <App updateColor={updateColor} />
    </ThemeProvider>
  );
}

export default Root;

2. 改造 App 组件，添加用户交互控件 #

在 App 中加入颜色选择 UI，调用父组件传递的更新函数修改颜色：

import styled from 'styled-components';

// 定义使用主题样式的 Button 组件
const Button = styled.button`
  background-color: ${props => props.theme.button.bg};
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 8px;
`;

// 颜色选择器容器样式
const ColorSelector = styled.div`
  margin: 20px 0;
`;

function App({ updateColor }) {
  return (
    <div>
      <ColorSelector>
        <label>按钮背景色：</label>
        <input
          type="color"
          defaultValue="#ccc"
          onChange={(e) => updateColor('secondary', e.target.value)}
        />
      </ColorSelector>
      <Button>First Button</Button>
      <Button>Second Button</Button>
    </div>
  );
}

export default App;

3. 工作原理说明 #

• 用户通过颜色选择器修改颜色时，updateColor 函数会更新 customCol 的状态
• 状态变更会触发 themes 对象重新生成，ThemeProvider 会检测到主题变化
• 所有使用 props.theme 的 Styled Components（如示例中的 Button）会自动重新渲染，应用新的样式

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