I am looking to create an if statement that will change the header color to grey if there is no icon present. Otherwise, the color should remain unchanged. Here is what I have in mind:
<h3 className={ icon ? "" : {style.grey} } >Lorem ipsum dolor</h3>Can anyone guide me on how to implement this using style and css loader?
This is my code:
import style from "./Article.css";
const Article = ( { image, icon } ) => {
return (
<div className= { style.article }>
<article>
{image ? <img className={ style.imgArticle } src= { image } /> : ""}
<h3 className={ icon ? "" : style.grey } >Lorem ipsum dolor</h3>
{icon ? <img className={ style.imgArticleTiny } src={ icon } /> : ""}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</div>
)
}
export default Article;
CSS :
.article h3 .grey {
color: #666666;
}