Check if min-width is set

Question

I'm creating a responsive layout using Tachyons media queries:

render() {
  const { UI } = this.props.state

  const containerStyle = {
    //right: `${UI.isMenuOpened ? 0 : `calc(-16rem + 4rem)`}`, // if min-width is setted
    right: `${UI.isMenuOpened ? 0 : `calc(-40% + 4rem)`}`, // if min-width is not setted
  }

  return (
    <div
      className="bg-gray w-40 min-w5 h-100 absolute o-50 flex transition"
      style={containerStyle}
    >
     //...
    </div>
  )
}

As you can see I want that the width of the div changes: 40% and min-width = w5 ( 16rem ). The problem is that I don't know how to change the right value in containerStyle . In calc(A + B) the is A that represents the width of the div and B that represents the padding (always 4rem ). What I need is to change A: it would be 40% is min-width is not set, and w5 if min-width is set.

How can I do that?

Answer 1

由于min-width的默认值为0 ，因此只需使用布尔类型强制（ 0 == false ）进行检查：

right: `${UI.isMenuOpened ? 0 : `calc(${elem.style.minWidth ? "-40%" : "w5"} + 4rem)`}`