CSS 不适用于映射 Font Awesome 图标

Question

我有一个 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.

Answer 1

React Documentation

确保你所有的 key 都是唯一的