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>
Comments
Post a Comment