Can constants be introduced into a ReactJSS stylesheet?

Question

Using ReactJSS, I've built a stylesheet that looks like this:

const styleSheet = {
  mainContainer: {
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBodyContainer: {
    overflowY: 'auto'
  },
  '@media (min-width: 576px)': {
    modalBodyContainer: {
      padding: '0 100px',
      maxHeight: 'calc(80vh - 185px)'
    }
  },
  errorStateDropdown: {
    border: [['1px solid red'], '!important']
  }
};

export default styleSheet;

I'm now just starting to introduce some responsive code, as illustrated by this line: '@media (min-width: 576px)'

Rather than repeat 576px over & over, I'd prefer to set it to a constant and reuse the constant.

The ReactJSS documentation is quite sparse so I can't figure out if this is possible. If you have a suggestion, I'd love to hear it.

Possible duplicate of [How do I create a dynamic key to be added to a JavaScript object variable](https://stackoverflow.com/questions/2462800/how-do-i-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable) — Emile Bergeron, Oct 09 '19 at 15:43

Dupocas · Answer 1 · 2019-10-09T15:45:01.230

2

Stylesheet is a regular javascript object.

const height = '518px'
const minWidth = '500px'

const styleSheet = {
  mainContainer: {
    height,
    display: condition ? 'flex' : 'block',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBodyContainer: {
    overflowY: 'auto'
  },
  [`@media (min-width: ${minWidth})`]: {
    modalBodyContainer: {
      padding: '0 100px',
      maxHeight: getMaxHeight()
    }
  },
  errorStateDropdown: {
    border: [['1px solid red'], '!important']
  }
};

export default styleSheet;

edited Oct 09 '19 at 15:45

answered Oct 09 '19 at 15:39

Dupocas

20,285
6
38
56

1

You're missing the brackets around the dynamic property key. – Emile Bergeron Oct 09 '19 at 15:43
Thanks as always ^^ – Dupocas Oct 09 '19 at 15:45
@Dupocas thanks for your feedback. It turns out that my linter didn't like me using the media query more than once. So, instead, I just have it once near the end of the styleSheet object and then group all of the "desktop only" CSS code therein. This works well and arguably better because now a new developer can instantly see all of the modifications for the non-mobile view. It thus follows the best practice of "Mobile First". – robertwerner_sf Oct 10 '19 at 16:11
Yes that is the pattern, you should have just one media query per size and group all your classes inside it – Dupocas Oct 10 '19 at 16:15

Can constants be introduced into a ReactJSS stylesheet?

1 Answers1