Используйте функцию 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 пикселей меньше ширины экрана.

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