已有对象时如何在jsx样式属性中添加变量？

Question

我正在尝试通过使用变量名 myStyle[ 编写逻辑来在 textarea 标签中执行 text-align =21=]，所以逻辑是有效的，但是当我为暗模式创建 切换 开关并添加更多样式作为 object 时。然后 myStyle 停止工作。所以问题是如何在已经存在给定对象的情况下在 style 属性中添加 myStyle 变量？正确的格式是什么？

export default function TextForm(prop) {
  const [text, setText] = useState("Enter text here");

  const [myStyle, setMyStyle] = useState({
    textAlign:'left'
  })
  const textAlign = ()=>{
    if(myStyle.textAlign === 'left'){
      setMyStyle({
        textAlign: 'center'
      })
    }
    else if(myStyle.textAlign === 'center'){
      setMyStyle({
        textAlign:'right'
      })
    }
    else{
      setMyStyle({
        textAlign:'left'
      })
    }
  }

  return (
    <>
    <div className='container' style={{color: prop.mode==='light'?'Black':'white'}}>
        <h2>{prop.heading} </h2>
        <div className="mb-3">
        <textarea className="form-control " style={myStyle,{ backgroundColor:prop.mode==='light'?'white':'grey', color:prop.mode==='light'?'black':'white'}} value={text}  onChange= {handleOnChange}  id="myBox" rows="6"></textarea>
        </div>
        <button className="btn btn-primary mx-1" onClick={textAlign} >Change Text Align</button>
    </div>
    </>
  )
}

Answer 1

将现有对象展开到一个新对象中，并在该新对象中列出所需的其他属性。

<textarea
  className="form-control "
  style={{
    ...myStyle,
    backgroundColor:prop.mode === 'light' ? 'white' : 'grey',
    color: prop.mode === 'light' ? 'black' : 'white'
  }}
  value={text}
  onChange={handleOnChange}
  id="myBox"
  rows="6"
></textarea>

虽然在元素上切换 CSS class 会更优雅，并且使用 CSS 规则而不是通过 JS 设置的属性来执行此操作。