javascript - CSS id selectors just won't work -

in react.js project, have div. div has button, , list. list marked id="results".

return <div>      <button label="combine cards" disabled={!this.props.combineready} onclick={this.handleclick} accent primary raised />  	     <br />  	     <ul >   	        { json.parse(this.state.data).resultcards.map(function(card){  	            return <li id="results">{card.deviation} <img src={'https://image.deckbrew.com/mtg/multiverseid/123456.jpg'}/></li>;                       	        }) }  	    </ul>  	</div>;

the styles.css file have displeasure of wrestling looks this;

/* list container. */  ul{      list-style: none;      display: inline-block;      width: 263px;      text-align: left;  }    /* individual list items. */  ul li{      display: block;      padding: 15px 20px;      background-color: #f8f8f8;      color: #7b8585;      margin-bottom: 3px;      position: relative;            transition: 0.3s;  }    /* card images within list items. */  ul li img{      /*height: 200px;*/      transform: scale(0.6, 0.6);      -ms-transform: scale(0.6, 0.6);      -webkit-transform: scale(0.6, 0.6);      align: top;      padding: 3px;      transition: 0.3s;  }    /* images when hovered over. */  ul li img:hover{      /*height: 311px*/      transform: scale(1, 1);      -ms-transform: scale(1, 1);      -webkit-transform: scale(1, 1);  }    ul li a{      position: absolute;      left: 160px;      font-size: 12px;      line-height: 16px;      color: #969d9d;  }    /* individual list items when hovered over. */  ul li:hover{      background-color:#d8f2f1;  }    li#results{      display: inline !important;       background-color: #7b8585 !important;      color: #f8f8f8 !important;      height: 200px !important;      overflow: visible !important;  }

at bottom style called li#results. tried ul#results li, #results, ul li#results , nothing make damned result list change in style. told it important. tried marking list container <ul 'id=results' /> , going off that. failed. in name of obscure css doing wrong?

(i have 2 other lists aren't results, can't change list styling, either.)

here's resulting html:

<div data-reactid=".0.0.0.1.0">    <button class="style__raised___3-pwa style__primary___zmqdt" data-react-toolbox="button" data-reactid=".0.0.0.1.0.0">      <span data-reactid=".0.0.0.1.0.0.1">combine cards</span>      <span data-react-toolbox="ripple" class="style__wrapper___vxsua" data-reactid=".0.0.0.1.0.0.2:1">        <span role="ripple" class="style__normal___k1ysf" style="transform: translate3d(-207.688px, -199.32px, 0px) scale(1); width: 398.25px; height: 398.25px;" data-reactid=".0.0.0.1.0.0.2:1.0"></span>      </span>    </button>    <br data-reactid=".0.0.0.1.0.1">    <ul data-reactid=".0.0.0.1.0.2" id="results">      <li data-reactid=".0.0.0.1.0.2.0">        <span data-reactid=".0.0.0.1.0.2.0.0">0.8743035007251114</span>        <span data-reactid=".0.0.0.1.0.2.0.1"> </span>        <img src="https://image.deckbrew.com/mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2">      </li>      <li data-reactid=".0.0.0.1.0.2.1">        <span data-reactid=".0.0.0.1.0.2.1.0">0.8663643850889716</span>        <span data-reactid=".0.0.0.1.0.2.1.1"></span>        <img src="https://image.deckbrew.com/mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2">        ...8 more lines.      </li>    </ul>  </div>

that's <ul id="results"/>. <li id="results"/> id tag moves line elements. <ul class="results"/> see nothing, no id or class @ all.

react-toolbox uses cssmodules styling , how should using them.

/* style.css */ .result {   color: green; } 

when importing css module js module, exports object mappings local names global names.

import styles "./style.css";  ... <li classname={styles.result}>{card.deviation}</li>