ReactJS選択したオプションコントロールで選択したオプションの色を変更します

Question

ReactJSを使用してコントロールのテキストと背景色のスタイルを設定しようとしています。

import React, { Component } from "react"; 

    import "./Test.css"; 

    class Test extends Component { 

     render =() => { 

     return ( 
      <select size={5} value={'3'}> 
       <option className='opt' value='1'>Option 1</option> 
       <option className='opt' value='2'>Option 1</option> 
       <option className='opt' value='3'>Option 1</option> 
       <option className='opt' value='4'>Option 1</option> 
       <option className='opt' value='5'>Option 1</option> 
      </select> 

     ); 
     } 
    } 

そして、私のCSS：

.opt { 
    color: red; 
    background-color: white; 
} 

.opt:checked { 
    color: white; 
    background-color: red; 
} 

私は（例では '3'）が選択された行のスタイルをcan't、私がしようとしないどんなここに私のReactJsコードです。それは灰色のままで、私はそれが白い文字で赤い背景を持つことを期待しています。

選択した行のスタイルを変更するにはどうすればよいですか？

Answer 1

JSX：

class Test extends React.Component { 
    state = { 
    option: "3" 
    } 

    handleOptionsChange = (event) => { 
    this.setState({ 
     option: event.target.value 
    }); 
    } 

    render() { 
    return ( 
     <select size={5} value={this.state.option} onChange={this.handleOptionsChange}> 
      <option className="opt" value='1'>Option 1</option> 
      <option className="opt" value='2'>Option 2</option> 
      <option className="opt" value='3'>Option 3</option> 
      <option className="opt" value='4'>Option 4</option> 
      <option className="opt" value='5'>Option 5</option> 
     </select> 
    ); 
    } 

そして、これはCSSである：ここでは

option { 
    background: #ffffff; 
    color: #ff0000; 
} 

select option:checked, 
select option:focus { 
    background: linear-gradient(#ff0000, #ff0000); 
    -webkit-text-fill-color: #ffffff; 
    color: #ffffff; 
} 

は、作業のデモです：https://jsfiddle.net/69z2wepo/96971/