Question

在我的react.JS项目中，我有一个div。这个div有一个按钮和一个列表。此列表标有ID =＆＃34;结果＆＃34;。

＆＃13;

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

＆＃13;

styles.css文件我不喜欢摔跤看起来像这样;

＆＃13;

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

＆＃13;

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

（我还有两个其他列表没有结果，所以我也不能改变列表样式。）

这是生成的html：

＆＃13;

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

＆＃13;

与<ul id="results"/>的对比。使用<li id="results"/>，id标记只会移动到所有行元素。使用<ul class="results"/>我什么也没看到，根本没有内容或类别。

Answer 1

react-toolbox使用CSSModules进行样式设置，how您应该使用它们。

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

从JS模块导入CSS模块时，它会导出一个对象，其中包含从本地名称到全局名称的所有映射。

import styles from "./style.css";

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

Answer 2

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

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

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

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

Answer 3

你的id #results在css中指向具有该ID的li：

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

您的ID结果位于ul-tag上。

<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

根据this issue on the CC Modules GitHub repo，您可以执行以下选项之一：

使用以下语法在 .css 文件中将其设为全局：
```
:global(#results){ /* Your css rules here */}
```

但是请注意，这与 CSS 模块的本地化概念背道而驰。

或者在您的 JSX/TSX 文件中使用由样式对象创建的 CSS 模块返回的 id，如下所示：
```
import styles from "./styles.css";

return (<li id={styles.results}></li>)
```

但是请注意，ID 将不再是 result 而是一些生成的 ID，因此请相应地处理它。

CSS id选择器刚刚工作

4 个答案: