When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine.
<--JavaScript-->
import React from "react";
import TitleImage from './Images/TitleBG.png'
import TitleImage2 from './Images/TitleMG.png'
import TitleImage3 from './Images/TitleCG.png'
import './header.css';
const TopHeading = () => {
return(
//This is a div with the ID "TopHeading", and the style is applied correctly.
<div id="TopHeading">
{/*The image with class "image1" does not have its style applied.*/}
<img className="image1" alt="Dofus" src={TitleImage}/>
<img width='auto' alt = "Memory Game" height='50px' src={TitleImage2}/>
<img width='auto' alt = "Character" height='50px' src={TitleImage3}/>
<div className="aDiv"></div>
</div>
);
};
<--CSS-->
#TopHeading{
display: grid;
align-items: center;
justify-items: center;
background-color: rgb(131, 192, 131);
height: 300px;
};
.image1{
border-style: solid;
width: auto;
height:250px;
}
.aDiv{
size: 50px;
border-style: solid;
The style of the ID gets properly applied to the div.
https://i.stack.imgur.com/prMWX.png
However, the style of the image with the class is somehow ignored: