CODEWITHSUNDEEP
javascriptcssreactjsjss
robertwerner_sf
robertwerner_sf

Reputation: 1303

Can constants be introduced into a ReactJSS stylesheet?

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.

Upvotes: 2

Views: 54

Answers (1)

Dupocas
Dupocas

Reputation: 21317

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;

Upvotes: 2

Related Questions