CSS 不适用于映射字体真棒图标答案

【问题标题】：CSS not applied to mapped font awesome iconsCSS 不适用于映射字体真棒图标
【发布时间】：2018-04-04 16:19:48
【问题描述】：

我遇到了 react/sass 问题。当我使用 .map 为文件格式创建多个字体真棒图标时，样式仅应用于映射的最后一个元素。映射如下所示：

filelist.map((ext) => {
              return(
                (ext != 'docx')
                ? ext != 'txt' 
                  ? <span className='col col-xs-6'><i key={ext} className={'fa fa-file-'.concat(ext).concat('-o red')}></i></span>
                  : <span className='col col-xs-6'><i key={ext} className={'fa fa-file-text-o yellow'}></i></span>
                : <span className='col col-xs-6'><i key={ext} className={'fa fa-file-word-o blue'}></i></span>
              );
            })

因此，如果 filelist 是 ['word', 'txt'] 样式将仅适用于 txt 图标。

这是正在应用的 SASS 文件。

.fa-file-word-o:hover 
  font-size: 1.7em
  transition: all 500ms ease-in-out

.fa-file-pdf-o:hover 
  font-size: 1.7em
  transition: all 500ms ease-in-out

.fa-file-text-o:hover 
  font-size: 1.7em
  transition: all 500ms ease-in-out

so in this case: the single pdf works fine and the word doc enlarge. but the text and pdf on the multi file type line do not enlarge on hover.

【问题讨论】：

您进入开发控制台并确保 class 名称是您所期望的，对吧？
@Andrew 是的，就在这里。从开发控制台：<i class="fa fa-file-text-o"></I> 和 <i class="fa fa-file-word-o"></I>
更新：我已经测试过，问题只是悬停。我能够更改映射元素的颜色。所以 css :hover 和 react .map 之间有一些奇怪的行为

标签： css reactjs sass

【解决方案1】：

React Documentation

确保您的所有密钥都是唯一的

【讨论】：

谢谢，刚刚通过记录ext 进行了检查，并且每行的键都是唯一的。