如何有条件地更改详细信息列表中行的颜色？

我正在看自定义项目行 https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemrows但没有太多文档。

我有一个表，如果当前用户创建了一行，我想将颜色从黑色更改为灰色。我可以这样做style。我了解如何有条件地改变颜色自定义项目列 https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns但无法将其推断为行。

我必须：

    _onRenderRow = (props) => {
    return props.item['creatorUid'].match("QDN6k4pLXkea2qRM9mS7vM6whBE3")?
        <DetailsRow {...props} style={{color:"#FF0000"}}/>
        :
        <DetailsRow {...props}/>
}

但颜色没有改变

<DetailsList 
  items={ items } 
  columns={ columns }  
  onRenderRow={ (props, defaultRender) => (
    <div className='red'>
      {defaultRender({...props, className: 'red'})}            
    </div>
  ) }
/>

<DetailsList 
  items={ items } 
  columns={ columns }  
  onRenderRow={ (props, defaultRender) => (
    <div className='red'>
      {defaultRender({...props, styles: {root: {background: 'red'}}})}            
    </div>
  ) }
/>      

https://codepen.io/vitalius1/pen/pQmpVO https://codepen.io/vitalius1/pen/pQmpVO

在这里您可以看到两种方法可以实现您的要求。

1. 首先是传递常规的类名并让它覆盖默认样式。如果您需要覆盖悬停状态或其他任何内容，您必须在开发工具中检查并定位适当的类。
2. 其次是实际推荐并在内部使用的内容来应用默认样式。使用此方法，当您想要覆盖悬停状态或其他任何内容时，您需要为每个样式区域提供样式（在示例中）root是其中之一）。有关每行可用的样式区域的列表，请遵循这个链接 https://github.com/OfficeDev/office-ui-fabric-react/blob/3deada22e50f972f160511197e84fdc8c9c6ceae/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts#L224-L240。有关悬停状态选择器的使用示例如下这个链接 https://github.com/OfficeDev/office-ui-fabric-react/blob/3deada22e50f972f160511197e84fdc8c9c6ceae/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts#L280-L312.

Note：使用第二种方法，您还可以传递样式函数来使用IDetailsRowStyleProps正如所见here https://github.com/OfficeDev/office-ui-fabric-react/blob/3deada22e50f972f160511197e84fdc8c9c6ceae/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts#L45-L57。这样您就可以根据组件的状态拥有非常动态的样式