Использование CSS с React/JSX

Question

Это может быть очень простой вопрос, но я не могу понять, как использовать CSS с React. Я слышал о встроенных стилях, но я не мог понять, как заставить его работать.

Более того, если я использую CSS, где я его применяю к рассмотрению всего моего HTML, это JSX в классе реакции. Так что я не был бы в состоянии сделать нормальный CSS т.е.

.className{ 

} 

Один из моих Реагировать классов содержит этот код:

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 }; Не можете ли это увидеть в реакции?

Answer 1

использовать Classname для типа ввода = "текст"

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

для Ur CSS .exText { фона: 'зеленый' }

используйте Classname в качестве атрибутов компоненты и используйте имя компонента с. если это имя класса и #, если его id.

Answer 2

Ref

Html

<h1 style={styles.heading}> 

Инлайн Стиль

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