javascript - CSS id 选择器是行不通的

Question

在我的 react.JS 元素中，我有一个 div。这个 div 有一个按钮和一个列表。这个列表用 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>;

我不满意的 styles.css 文件看起来像这样；

/* The list container. */
ul{
    list-style: none;
    display: inline-block;
    width: 263px;
    text-align: left;
}

/* The individual list items. */
ul li{
    display: block;
    padding: 15px 20px;
    background-color: #F8F8F8;
    color: #7B8585;
    margin-bottom: 3px;
    position: relative;
    
    transition: 0.3s;
}

/* The card images within the 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;
}

/* Those 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;
}

/* The 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;
}

底部是一个名为 li#results 的样式。我尝试了 ul#results li、#results、ul li#results，但没有什么能让该死的结果列表改变样式。我什至告诉它这很重要。我尝试将列表容器标记为 <ul 'id=results' /> 并关闭它。那也失败了。以晦涩的 CSS 名义，我做错了什么？

(我还有两个不是结果的列表，所以我也不能只更改列表样式。)

这是生成的 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>

那是 <ul id="results"/> 。使用 <li id="results"/> id 标签只是移动到所有行元素。使用 <ul class="results"/> 我什么也看不到，根本看不到 id 或类。

Answer 1

我意识到模块中的id也变成了唯一的id，就像类一样你可以用这个

import style from './style.module.css';

<div id={style.Green}>
  Text green
</div>

来自 WebStorm 的 linter 显示“未解析的变量”，但一切正常。