javascript - 将 CSS 与 React/JSX 结合使用

Question

这可能是一个非常简单的问题，但我不知道如何将 CSS 与 React 结合使用。我听说过内联样式，但不知道如何让它发挥作用。

更重要的是，如果我使用 CSS，我应该在哪里应用它来考虑我所有的 HTML 都是 React 类中的 JSX。所以我不能做普通的 CSS 即

.className{

}

我的一个 react 类包含这段代码:

render: function() {

    return (
        <div>
          <h1> Todos </h1>

          <form className="todoForm" onSubmit={this.handleSubmit}>
            <input
                type="text"
                placeholder="Enter task"
                value={this.state.text}
                onChange={this.handleChange}
                />
            <input
                type="submit"
                value="Submit todo"
                />
          </form>

          <h4> List of todos: </h4>

          <ToDoList deleteItem={this.deleteItem} listItems={this.state.submittedValues}/>
        </div>
    );

如何使表单中的输入框具有绿色背景或如何使 <h1> heading蓝色字体？在 CSS 中，我只需要一个 css 文件将它链接到 html 并说:h1 { color: blue };虽然不能完全看到它的 react ？

Answer 1

Ref

HTML

<h1 style={styles.heading}>

内联样式

let styles = {
   heading: {
     fontColor: '#00f'
   };
}