Question

我正在查看customitemrows，但是没有太多文档。

我有一张桌子，如果一行是当前用户创建的，我想将颜色从黑色更改为灰色。我可以使用style来做到这一点。我了解如何有条件地更改customitemcolumns中的颜色，但是无法将其推断到行中。

我必须：

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

但是颜色没有改变

Answer 1

<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

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

首先传递一个常规的className，并使其覆盖默认样式。如果您需要覆盖悬停状态或其他任何内容，则必须在开发工具中检查并定位适当的类。
第二是实际建议的内容，并在内部用于应用默认样式。使用此方法时，如果要覆盖悬停状态或其他任何状态，则需要为每个样式区域提供样式（在示例root中就是其中一种）。有关每一行可用的样式区域的列表，请遵循this link。有关将选择器用于悬停状态的示例，请遵循this link。

注意：使用第二种方法，您还可以传递样式功能以利用IDetailsRowStyleProps，如here所示。这样，您可以根据组件的状态而拥有非常动态的样式

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

1 个答案: