使用 Styled Components Theme，如何指定设计系统的颜色？

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 is not defined 错误。我这样做对吗？如何使用主题文件中的样式组件定义我的颜色？

目标是让它起作用：

  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],
};

使用 Styled Components Theme，如何指定设计系统的颜色？

With a Styled Components Theme, how to a specify a design system's colors?

css

reactjs

styled-components