Почему мой встроенный стиль не работает с реагировать?

Question

Я пытаюсь использовать встроенную реакцию, просто чтобы проверить это, однако мой вывод по-прежнему не меняется. Цвет должен быть изменен на красный. Мой терминал говорит, что он также был успешно стилизован.

import React from 'react'

function App() {

  const styles = {
    color: 'red'
  }


  return (
    <div className="App">
    <div>
    <h1 styles={styles}>Why does this not work</h1>

    <input type="checkbox"/>
    <p>Placeholder text </p>

    <input type="checkbox"/>
    <p>Placeholder text </p>

    <input type="checkbox" />
    <p>Placeholder text </p>

    <input type="checkbox" />
    <p>Placeholder text </p>

    </div>
  </div>
  );
}

export default App;

Вот что я получаю обратно. «Почему это не работает» должно измениться на красный.

Answer 1

Должно быть style={styles}, а не styles={styles}