Within my index.html file, where my React app is located, I have included a CSS stylesheet. Inside this stylesheet are the following CSS properties:
#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
}
The Webshop element is defined in a separate file that contains the following 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 to 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>
);
}
Oddly, the CSS styles apply to the Webshop element but not to the button within the Render method. Other components in different files are working as expected. How can I ensure that the CSS styling applies to the button as well?