Question

在我的样式组件主题中，我正在尝试执行以下操作：

theme.js

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

  blues: {
    60: '#123123',
    50: '#123123',
    40: '#123123',
  },

  // Primary defined here to be easier
  purple: purples[50],
  blue: blues[50]

};

const theme = {
  colors,
};

export default theme;

我收到blues未定义的错误。我这样做了吗？如何使用主题文件中的样式化组件来定义颜色？

目标是让它发挥作用：

  background: ${(props) => props.theme.colors.purple};
  background: ${(props) => props.theme.colors.purples[40};

Answer 1

你有：

const colors = {
  // Primary defined here to be easier
  purple: purples[50],
  blue: blues[50]
  ...

但blues尚未定义。你需要这样的东西：

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

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

const colors = {
  purple: purples[50],
  blue: blues[50],
};

const theme = {
  colors,
};

export default theme;

或者，您可以执行上述操作，但可以单独导出每个内容：

export const purples = {
  60: '#123123',
  50: '#123123',
  40: '#123123',
},

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

export const theme = {
  purple: purples[50],
  blue: blues[50],
};

使用样式组件主题，如何指定设计系统的颜色？

1 个答案: