Как условно изменить цвет строки в подробном списке? - PullRequest
Новая
       10

Как условно изменить цвет строки в подробном списке?

0 голосов
/ 05 декабря 2018

Я смотрю на customitemrows , но документации не так много.

У меня есть таблица, и если строка была создана текущим пользователем, я хочу изменить цветот черного до серого.Я могу сделать это с style.Я понимаю, как условно изменить цвет в customitemcolumns , но не могу экстраполировать его на строки.

Я получил: 

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

но цвет не меняется

1 Ответ

0 голосов
/ 05 декабря 2018 
<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

Здесь вы можете увидеть, как 2 метода достигают того, что вы просите.

  1. Сначала передается обычное имя className, и оно переопределяет стили по умолчанию.Если вам нужно переопределить состояния при наведении или что-то еще, вы должны проверить в инструментах разработчика и нацелить на соответствующие классы.
  2. Второй - это то, что фактически рекомендуется и используется внутри для применения стилей по умолчанию.С помощью этого метода, когда вы хотите переопределить состояния наведения или что-то еще, вам нужно будет предоставить стили для каждой области стилей (в примере root является одним из них).Для получения списка областей стиля, доступных для каждой строки, следуйте по этой ссылке .Для примера использования селекторов для состояний при наведении следуйте этой ссылке .

Примечание : со вторым методом вы также можете передать функцию стиля виспользуйте IDetailsRowStyleProps как видно здесь .Таким образом, вы можете иметь очень динамичный стиль в зависимости от состояния компонента

...