Question

我有一个输入，想要在状态更改时更改其宽度。我希望它继承所有属性，但只更改width属性。我尝试了几件事，但没有任何效果。所以我的风格就是这样

  input: { 
    width: "40vw",
    color: "gray",
    padding: 10,
    height: 30,
  }

我正在检查状态并尝试使用它

 let inputClass = classes.input
    if(navShow) {
      inputClass = classes.input.width === '100vw'
    }

并像

一样应用

<input className = {inputClass}

我希望输入继承所有其他属性。我不想在另一个对象中重写所有这些样式。我该怎么办？

Answer 1

在这一行：inputClass = classes.input.width === '100vw'您将inputClass重新分配为boolean。相反，您应该只修改inputClass的{{1}}属性的值，如下所示：

width

编辑：您应该将JSX更改为使用let inputClass = classes.input if(navShow) { inputClass.width = '100vw' } return ( <input style={inputClass} /> );而不是style，因为您传递的是样式对象，而不是css类。希望这可以解决其他问题。

Answer 2

您可以通过className内的if条件使用动态类

<input className = {navShow ? inputClass : anotherClass} />

inputClass个性风格和anotherClass以及另一种风格

对状态更改做出内联样式的反应

2 个答案: