在我的react.JS项目中,我有一个div。这个div有一个按钮和一个列表。此列表标有ID ="结果"。
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文件我不喜欢摔跤看起来像这样;
/* 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:
<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"/>
我什么也没看到,根本没有内容或类别。
答案 0 :(得分:0)
react-toolbox使用CSSModules进行样式设置,how您应该使用它们。
/* style.css */
.result {
color: green;
}
从JS模块导入CSS模块时,它会导出一个对象,其中包含从本地名称到全局名称的所有映射。
import styles from "./style.css";
...
<li className={styles.result}>{card.deviation}</li>
答案 1 :(得分:0)
我意识到模块中的 id 也变成了唯一的 id,就像类一样 你可以用这个
import style from './style.module.css';
<div id={style.Green}>
Text green
</div>
来自 WebStorm 的 linter 显示“未解析的变量”,但一切正常。
答案 2 :(得分:-1)
你的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应该可以解决问题。
答案 3 :(得分:-1)
根据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,因此请相应地处理它。