Можно ли ввести константы в таблицу стилей ReactJSS? - PullRequest
Новая
       11

Можно ли ввести константы в таблицу стилей ReactJSS?

2 голосов
/ 09 октября 2019

Используя ReactJSS, я создал таблицу стилей, которая выглядит следующим образом: 

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;

Сейчас я только начинаю вводить некоторый адаптивный код, как показано этой строкой: '@media (min-width: 576px)'

Вместо того, чтобы повторять 576px снова и снова, я бы предпочел установить ее на постоянную и повторно использовать константу.

Документация ReactJSS довольно редкая, поэтому я не могу понять, так ли этовозможно. Если у вас есть предложение, я бы хотел его услышать.

1 Ответ

2 голосов
/ 09 октября 2019

Stylesheet - это обычный 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;
...