Wie ändere ich die Rahmenfarbe von Eingabe/Textarea auf: Fokus?

Question

ich reagieren und meine zusätzliche CSS-Definitionen findet in der JS-Datei als Konstanten wie folgt aus (hoffen, dass das nicht eine schlechte Praxis ist):

const STYLE = { 
    logo: { 
     width: '206px', 
     height: '73px', 
     margin: '120px auto 0', 
     display: 'block' 
    }, 
    label: { 
     fontSize: 'x-small' 
    }, 
    control: { 
     border: 'solid', 
     borderWidth: '0 0 1px', 
     borderColor: '#E0E0E0', 
     width: '200px' 
    } 
}; 

export default class Home extends React.Component { 
    render() { 
     return (
      <div> 
       <img src='.../logo.gif' style={STYLE.logo}/> 
       <FormGroup> 
        <Col smOffset=...> 
         <Form horizontal> 
          <FormGroup> 
           <Col sm=... style={STYLE.label}> 
            Label: 
            <input style={STYLE.control} type="text"/> 
           </Col> 
          </FormGroup> 
         </Form> 
        </Col> 
       </FormGroup> 
      </div> 
     ) 
    } 
} 

Ich möchte den Rahmen um die Eingabekomponente entfernen, mit CSS. Ich brauche die folgenden CSS zu meinem STYLE.control hinzuzufügen:

input:focus { 
    outline:none; 
} 

Aber ich weiß nicht, wie das zu tun, weil sie (natürlich) das nicht funktioniert:

const STYLE = { 
    noBorder: { 
     input:focus: 'outline:none' 
    } 
}; 

Answer 1

Nach Ich habe in der React-Dokumentation ein paar Stylings gemacht. Es scheint, dass die beste Option, um dieses Problem zu lösen, Radium ist.

Answer 2

render() { 
     return (
      <div> 
       <style> 
       input:focus { 
       outline: none; 
       } 
       </style>