0

I’m using jss through react-jss. Let’s say that I have a theme where I have defined a base color. Then I want to define a default border in this theme, referring to the base color. 

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

I haven’t found a syntax for this. Isn’t it possible? Do I have to define the color outside and use it both places?

const baseColor = ‘#aaaaaa’;
const theme = {
  baseColor: baseColor,
  defaultBorder: [[1, ‘solid’, baseColor]]
}
Vegar
  • 12,828
  • 16
  • 85
  • 151
  • Can't you just use `theme.baseColor` ? Maybe I misunderstood the question. – 3Dos Apr 09 '18 at 08:04
  • nope, you can't. theme is the constant being defined, so trying to refer to it directly ends up in a 'undefined' error. – Vegar Apr 09 '18 at 08:14
  • You could define you theme in a module and import it in whatever component you like then. – 3Dos Apr 09 '18 at 08:16
  • Yes, that's what I'm doing. The question is how to best define the theme itself - if it is possible to reuse part of he theme definition in the theme it self. – Vegar Apr 09 '18 at 08:17
  • Oh I just understood :p I'll edit my answer then! – 3Dos Apr 09 '18 at 08:20

2 Answers2

0

This is how I'd do it. There maybe a better solution though.

mytheme.js :

export const baseColor = '#aaa'

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

export default theme

The advantages I see in this are the following:

  • Your theme will be "auto documented" as the project grows and easily updatable.
  • Exporting each constant like export const baseColor = '#aaa' also makes your theme constants useable in the components if needed.
  • You could implement multiple themes based on just the constants having a object structure "convention" with a little modifications on the structure of the theme files.
3Dos
  • 3,210
  • 3
  • 24
  • 37
  • Yes, this is the way I ask if is the only way in the question. – Vegar Apr 09 '18 at 09:38
  • By my "not extensive at all" knowledge, it is. But I see a good thing in this: Your theme will be "auto documented" as the project grows and easily updatable. Exporting each constant like `export const baseColor = '#aaa'` also makes your theme constants useable in the components if needed. So I think this is not bad at all! – 3Dos Apr 09 '18 at 10:01
  • I'll rather have my components access those values through the theme, though. That's kinda the reason for having a theme in the first place. If the other constants are exposed and used, switching theme will have no effect. – Vegar Apr 09 '18 at 10:02
  • I'm sorry I could not help you then. I'll still follow this thread as I'm curious if there's a solution suitable for your needs ! – 3Dos Apr 09 '18 at 10:05
  • Your attempt is appreciated ;-) I'm letting the question stay in case a jss guru passes by. – Vegar Apr 09 '18 at 10:09
0

It is basically a JavaScript question, not a JSS one. You can put it in a separate variable like you suggested. In order to use "this" you need to create a class.

So I would also recommend putting reusable stuff in separate variables or even into a separate object and if it grows even export it from a separate module.

Oleg Isonen
  • 1,463
  • 10
  • 10
  • The use of ‘this’ is of cause a js issue, but jss has a lot of nifty syntax that is taken into account when generating the final css, like @ and & and ‘extend’ and what not, so there could be that it had something allowing to refer to other rules defines in the theme. – Vegar Apr 09 '18 at 12:32