javascript - CSS style is not applying to button in React component -

i have css stylesheet in index.html file react app loaded. in here have following css values :

#webshop {       background-color: white;       height: 100%;       width: 100%; } 

and

#webshop, button {       position: relative       border: 6px solid #232323       z-index: 2       padding: 12px 22px       margin: 0 10px       box-sizing: border-box       font-size: 26px       font-weight: 600       text-transform: uppercase       text-decoration: none       color: #232323 } 

webshop located in different file contains render method:

render() {         return (             <div classname='webshop' id='webshop'>                 <li>                     <img src="./products.jpeg" width="350" height="350"></img>                     <button onclick={this.handleclick} classname="addit">add cart</button>                     <select id="size" onchange={this.change} value={this.state.value}>                         <option value="medium">medium</option>                         <option value="large">large</option>                         <option value="x-large">x-large</option>                     </select>                     <img src="./product.jpeg" width="350" height="350"></img>                 </li>             </div>         );     } 

for reason css applies webshop not button. have other components in other files work also. how can css apply button in render method?

the first 2 critical, last 2 advices.

1. remove comma so:

#webshop button {   ... } 

2. css semicolons must, while in javascript can omit them, being encouraged in standard.js rules.

3. img tags should self-closing so: <img />. in fact element without text within them should follow well.

4. avoid using ids in css. read more css specificity.