如何使用论坛反应动态更改按钮样式？

Question

我希望用户输入按钮的颜色，然后根据用户输入的内容动态更改。我仍然是新手，无法做出反应并尝试解决问题。

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("white");

  function handleChange(event) {
    console.log(event.target.value);
    setName(event.target.value);
  }

  return (
    <div className="container">
      <h1>{name}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
      />

      <button type="text" style={{ backgroundColor: { name } }}>
        Submit
      </button>
    </div>
  );
}

export default App;

Answer 1

backgroudColor 属性应设置为 string（只是 name）而不是对象 ({ name })

所以这个

<button type="text" style={{ backgroundColor: { name } }}>
  Submit
</button>

应该是这个

<button type="text" style={{ backgroundColor: name }}>
  Submit
</button>

Answer 2

删除括号，如： style={{ backgroundColor: name }}

如何使用论坛反应动态更改按钮样式？

How to dynamically change button style using forums react?

html

css

reactjs

button

background-color