在它自己的主题中引用 JSS 主题中的值答案

【问题标题】：Refer to values in JSS theme in the theme it self在它自己的主题中引用 JSS 主题中的值
【发布时间】：2018-09-18 13:34:37
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs jss

【解决方案1】：

我就是这样做的。不过也许有更好的解决方案。

mytheme.js：

export const baseColor = '#aaa'

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

export default theme

我看到的优点如下：

【讨论】：

是的，这是我询问是否是问题中唯一方法的方式。
根据我的“一点也不广泛”的知识，它是。但我从中看到了一件好事：随着项目的发展和易于更新，您的主题将被“自动记录”。如果需要，导出每个常量（如 export const baseColor = '#aaa'）还可以使您的主题常量在组件中可用。所以我觉得这还不错！
不过，我宁愿让我的组件通过主题访问这些值。这就是首先要有一个主题的原因。如果其他常量暴露并使用，切换主题将不起作用。
很抱歉当时我帮不了你。我仍然会关注这个帖子，因为我很好奇是否有适合您需求的解决方案！
感谢您的尝试 ;-) 我会让这个问题留下，以防 jss 大师路过。

【解决方案2】：

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

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

【讨论】：

使用 'this' 会导致 js 问题，但是 jss 有很多漂亮的语法在生成最终的 css 时会被考虑在内，比如 @ 和 & 和 'extend' 等等不是，所以它可能有一些允许引用主题中定义的其他规则的东西。