Office ui fabric 如何有条件地更改detailslist中行的颜色？

我正在看，但是没有太多的文档

我有一个表，如果一行是由当前用户创建的，我想将颜色从黑色更改为灰色。我可以用

style

实现这一点。我知道如何在中有条件地更改颜色，但无法将其推断到行

我必须：

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

\u onRenderRow=（道具）=>{
返回道具。项目['creatorUid']。匹配（“QDN6k4pLXkea2qRM9mS7vM6whBE3”）？
:
}

但是颜色没有改变

(
<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>
  ) }
/>      

{defaultRender（{…props，类名：'red'}）}
) }
/>
(
{defaultRender（{…道具，样式：{根：{背景：{red'}}}}
) }
/>      

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

首先是传递一个常规类名，并让它覆盖默认样式。如果需要覆盖悬停状态或其他任何内容，则必须在dev工具中进行检查，并以适当的类为目标

第二个是实际推荐并在内部用于应用默认样式的内容。使用此方法，当您希望覆盖悬停状态或其他任何内容时，需要为每个样式区域提供样式（在示例中，

root

就是其中之一）。有关每行可用的样式区域列表，请参见。有关悬停状态选择器用法的示例，请参见

---

注意：使用第二种方法，您还可以传递一个样式函数来使用

IDetailsRowStyleProps

，如图所示。通过这种方式，您可以根据组件的状态拥有非常动态的样式

@kirill_igum有一件事要提的是，如果您使用第一种方法，以一些全局类名为目标，请确保以

ms ComponentName-…

开头的类名为目标，而不是以一些散列结尾的类名为目标（例如：

root-224

）。