将CSS与React/JSX结合使用

Using CSS with React/JSX

本文关键字：结合 JSX CSS React      更新时间：2023-09-26

这可能是一个非常简单的问题，但我不知道如何将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 };看不太清楚反应如何？

Ref

Html

<h1 style={styles.heading}>

内联样式

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

使用className作为输入type="text"

<input type='text' className='exText' />

用于URL CSS.exText{背景："绿色"}

请使用className作为组件的属性，并将组件名称与一起使用。如果它是className，#如果它的id。

相关文章：