Using CSS with React/JSX

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 i.e

.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?

Pardeep Dhingra · Accepted Answer · 2015-11-26 11:41:05Z

2

Ref

Html

<h1 style={styles.heading}>

Inline Style

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

edited Nov 26, 2015 at 11:41

answered Nov 26, 2015 at 11:36

Pardeep Dhingra

3,9467 gold badges35 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pardeep Dhingra Over a year ago

Put it in end after closing of your class.

The Hurricane Over a year ago

<h1 style={styles.heading}> Todos </h1> ...... Uncaught ReferenceError: styles is not defined. also at the end of what class?

Pardeep Dhingra Over a year ago

In the class where you have written render.

Pramod Mg · Accepted Answer · 2015-11-26 11:32:22Z

1

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.

answered Nov 26, 2015 at 11:32

Pramod Mg

2,3001 gold badge13 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using CSS with React/JSX

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related