Используйте функцию calc в CSS в JS в компоненте React

Question

Я работаю над одним компонентом реагирования, в котором мне нужно использовать функцию calc в стилях

const styles = {
  spotImg:{
    maxWidth:"100%",
    maxHeight:"100%"
  },
  spotCont:{
    width: /*here want to use calc with screen width*/
  }
}

Я хочу использовать ширину экрана с функцией calc в приведенном выше коде стиля в компоненте реагирования js.

Answer 1

const styles = {
  spotImg:{
    maxWidth:"100%",
    maxHeight:"100%"
  },
  spotCont:{
    width: "calc(100vw)", 
     fallbacks:["-moz-calc(100vw)", 
     "-webkit-calc(100vw)",
     "-o-calc(100vw)
     ]
  }
}

Поместите функцию calc в двойные кавычки, и затем вы можете использовать CSS vw для доступа к ширине экрана.Т.е. 100vw предоставляет вам всю ширину экрана.Например, 100vw - 250px предоставляет вам на 250 пикселей меньше ширины экрана.

РЕДАКТИРОВАТЬ: добавлены отступления, основанные на комментарии ОП о браузере, не принимающем функцию calc.