Question

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

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

您知道如何使用样式和CSS加载程序实现它吗？

我的代码：

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

解决了问题

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

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

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

我的坏

React CSS加载器样式加载器IF语句

1 个答案: