如何在Styled Components主题中定义设计系统颜色并解决变量未定义错误

嘿，我来帮你解决这两个关于Styled Components主题的问题～

问题1：如何通过Styled Components主题指定设计系统的颜色？ #

要在Styled Components里用主题统一管理设计系统的颜色，操作起来很清晰，分三步就能搞定：

• 第一步：创建主题对象
  先写一个主题文件（比如theme.js），把设计系统里的所有颜色规整成结构化的对象，方便后续维护和调用：

  const theme = {
    colors: {
      purples: {
        60: '#2D1B69',
        50: '#4B2E83',
        40: '#6A4C9E'
      },
      blues: {
        60: '#0F4C81',
        50: '#2E70B7',
        40: '#4D94DF'
      },
      // 可以直接定义常用主色，简化后续调用
      primaryPurple: '#4B2E83',
      primaryBlue: '#2E70B7'
    }
  };
  
  export default theme;
  

• 第二步：用ThemeProvider包裹应用
  在应用的入口文件（比如App.js）里，导入Styled Components的ThemeProvider和你写好的主题，把整个应用包裹起来——这样所有子组件都能全局访问到主题变量：

  import { ThemeProvider } from 'styled-components';
  import theme from './theme';
  
  function App() {
    return (
      <ThemeProvider theme={theme}>
        {/* 这里放你的应用所有内容 */}
      </ThemeProvider>
    );
  }
  
  export default App;
  

• 第三步：在Styled组件中调用主题颜色
  现在你就能在任意styled组件里，通过props.theme来获取主题里的颜色了：

  import styled from 'styled-components';
  
  const PrimaryButton = styled.button`
    background-color: ${props => props.theme.colors.primaryPurple};
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  `;
  

问题2：为什么会出现“blues is not defined”错误？怎么修正？ #

你的写法确实有问题哦～ 报错的核心原因是：在创建colors对象的过程中，purples和blues是这个对象的内部属性，在对象还没完全初始化完成时，你没法直接用purples或blues这种变量名去引用它们——此时这些变量根本还不存在，JS自然会抛出未定义的错误。

给你三种可行的修正方案，选你觉得顺手的就行：

方案1：先单独定义颜色组变量，再组装成colors对象 #

把purples和blues先单独提取成变量，这样在创建colors对象时，它们已经是存在的独立变量了：

// 先单独定义颜色组
const purples = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
};

const blues = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
};

// 再组装成colors对象，此时可以正常引用purples和blues
const colors = {
  purples,
  blues,
  purple: purples[50],
  blue: blues[50]
};

const theme = { colors };
export default theme;

方案2：使用ES6 getter函数延迟求值 #

如果不想拆分变量，可以用getter函数——它会在你访问colors.purple的时候才去读取colors.purples[50]，此时对象已经完全创建好了：

const colors = {
  purples: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },
  blues: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },
  // 用getter延迟获取属性值
  get purple() {
    return this.purples[50];
  },
  get blue() {
    return this.blues[50];
  }
};

const theme = { colors };
export default theme;

方案3：创建完colors对象后再追加属性 #

先创建只包含purples和blues的colors对象，之后再手动添加purple和blue属性：

const colors = {
  purples: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },
  blues: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },
};

// 此时colors已经初始化完成，可以正常引用内部属性
colors.purple = colors.purples[50];
colors.blue = colors.blues[50];

const theme = { colors };
export default theme;

这三种方法都能解决你的报错，同时实现你想要的“快速访问主色”的需求～

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