在React / JSX中使用CSS

Question

This may be a very simple question but I cannot figure out how to use CSS with React. I have heard of inline styles but I couldn't figure out how to get it to work.

More so, if I use CSS where do I apply it to considering all my HTML is JSX within the react class. So I would not be able to do normal CSS ie

.className{

}

One of my react classes contains this code:

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>
    );

How would I say make the input box in the form have a green background or how would I make the <h1> heading blue in font? In CSS I would just have a css file link it to html and say: h1 { color: blue }; cant quite see it in react though?

Answer 1

Ref

Html

<h1 style={styles.heading}>

Inline Style

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

Answer 2

use a className for input type="text"

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

for Ur CSS .exText { background: 'green' }

please use className as a attributes to the component and use the components name with . if it is a className and # if its id.