在自己的主题中引用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问题。你可以把它放在你建议的单独变量中。为了使用＆＃34;这个＆＃34;你需要创建一个类。

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