reactjs - 在它自己的主题中引用 JSS 主题中的值

Question

我正在通过 react-jss 使用 jss。假设我有一个定义了基色的主题。然后我想在这个主题中定义一个默认边框，参考基色。

const theme = {
  baseColor: ‘#aaaaaa’,
  defaultBorder: [[1, ‘solid’, this.baseColor]]
}

我还没有找到这个的语法。不可能吗？我是否必须在外面定义颜色并在两个地方都使用它？

const baseColor = ‘#aaaaaa’;
const theme = {
  baseColor: baseColor,
  defaultBorder: [[1, ‘solid’, baseColor]]
}

Answer 1

我就是这样做的。虽然可能有更好的解决方案。

mytheme.js：

export const baseColor = '#aaa'

const theme = {
  baseColor,
  defaultBorder: [[1, 'solid', baseColor]]
}

export default theme

我在其中看到的优点如下：

• 随着项目的发展和易于更新，您的主题将“自动记录”。
• 如果需要，导出每个常量export const baseColor = '#aaa'也可以使您的主题常量在组件中可用。
• 您可以仅基于具有对象结构“约定”的常量实现多个主题，并对主题文件的结构稍作修改。

Answer 2

它基本上是一个 JavaScript 问题，而不是 JSS 问题。您可以按照您的建议将其放在单独的变量中。为了使用“this”，您需要创建一个类。

所以我还建议将可重用的东西放在单独的变量中，甚至放在单独的对象中，如果它增长甚至从单独的模块中导出。