React css-loader style-loader IF 语句

Question

我想要一个 if 语句，如果没有任何图标 header 是灰色的，如果没有就没有变化。 我想要这样的东西：

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

你知道如何用 style 和 css loader 来实现它吗？

我的代码：

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

而不是使用className尝试使用 style attribute

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

代码sanboxsample

Answer 2

问题解决了

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

作品。 我刚刚使用了糟糕的 css 选择器。 它应该是：

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

我的错

Answer 3

出色地，

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