React css-loader style-loader IF 语句答案

【问题标题】：React css-loader style-loader IF statementReact css-loader style-loader IF 语句
【发布时间】：2020-03-13 14:58:07
【问题描述】：

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

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

【问题讨论】：

标签： css reactjs frontend css-loader

【解决方案1】：

问题解决了

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

有效。我刚刚使用了糟糕的 CSS 选择器。应该是：

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

我的错

【讨论】：