React css-loader style-loader IF statement

Question

I want to have an if statement that if there isn't any icon the header is grey, if not there is no change. I'd like to have something like this:

<h3 className={ icon? "": {style.grey} } >Lorem ipsum dolor</h3>

Do you know how to implement it with style and css loader?

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;
}

Answer 1

Instead of using className try using style attribute

<h3 style={ icon ? null : {color: style.grey} }>Lorem ipsum dolor</h3>

codesanboxsample

Answer 2

PROBLEM SOLVED

<h3 className={ icon ? "" : style.grey }  >Lorem ipsum dolor</h3>

works. I've just used bad css selector. It should be:

.article h3.grey {
    color: #666666;
}

my bad

Answer 3

well,

<h3 className={ !icon && style.grey }  >Lorem ipsum dolor</h3>