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 或 class。

Answer 1

我意識到模塊中的 id 也變成了唯一的 id，就像類一樣 你可以使用這個

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

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

來自 WebStorm 的 linter 顯示“未解決的變量”，但一切正常。

Answer 2

react-toolbox使用 CSSModules 進行樣式化，這就是你應該如何使用它們。

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

從 JS 模塊導入 CSS 模塊時，它會導出一個對象，其中包含從局部名稱到全局名稱的所有映射。

import styles from "./style.css";

...
<li className={styles.result}>{card.deviation}</li>

Answer 3

您在 css 中的 id #results 指向具有該 ID 的 li：

li#results{
  display: inline !important; 
  background-color: #7B8585 !important;
  color: #F8F8F8 !important;
  height: 200px !important;
  overflow: visible !important;
}

您的 id 結果在 ul 標簽上。

<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>

將 CSS 選擇器更改為 ul#results 應該可以解決問題。

Answer 4

根據CC Modules GitHub repo 上的這個問題，您可以執行以下選項之一：

1. 使用以下語法在 .css 文件中將其設為全局：

    :global(#results){ /* Your css rules here */}

但是請注意，這違背了 CSS 模塊的本地化概念。

2. 或者在你的 JSX/TSX 文件中使用創建 CSS 模塊的樣式對象返回的 id，如下所示：

    import styles from "./styles.css"; return (<li id={styles.results}></li>)

但是請注意，ID 將不再是result ，而是一些生成的 ID，因此請相應地處理它。