代码之家 › 专栏 › 技术社区 › user388969

在reach fluent UI中为“详细信息”列表中的行上色

react-state-management spfx sharepoint-online reactjs

0

user388969 · 技术社区 · 2 年前

如果值大于100且小于1000,我如何动态地为一行着色。

这是我的代码

  <div> <DetailsList  items={this.state.IstateItems} 
  columns={[
    {key:"FirstName",name:"First Name",fieldName:"FirstName",minWidth:150},
    {key:"lastname",name:"Last Name",fieldName:"lastname",minWidth:150},
    {key:"Bdate",name:"Birth Date",fieldName:"Bdate",minWidth:100},
    {key:"Sal",name:"Salary",fieldName:"Sal",minWidth:100},
    {key:"Manager",name:"Boss",fieldName:"Manager",minWidth:200},
  ]} onRenderRow={(props,defaultrender)=>(
    <div className={styles.red}>
      {defaultrender({...props,className:'red'})}

    </div>

如果工资超过100,我想把那一行涂成红色

0 回复 | 直到 2 年前

1

-1

RaytheonXie-MSFT 2 年前

您可以参考以下代码

const MyDetailsList = () => {
  const items = [
    { id: 1, name: 'Item 1', color: 'red' },
    { id: 2, name: 'Item 2', color: 'blue' },
    { id: 3, name: 'Item 3', color: 'green' },
  ];

  const columns: IColumn[] = [
    { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
    { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100 },
  ];

  const onRenderRow = (props, defaultRender) => {
    const rowClass = mergeStyles({
      backgroundColor: props.item.color, // Use the color property of the item to set the background color
    });

    return <div className={rowClass}>{defaultRender(props)}</div>;
  };

  return (
    <DetailsList
      items={items}
      columns={columns}
      selectionMode={SelectionMode.none}
      onRenderRow={onRenderRow}
    />
  );
};