Задание условного фонового линейного градиента для getTrProps в реагирующей таблице некорректно отображается - PullRequest
Новая
       4

Задание условного фонового линейного градиента для getTrProps в реагирующей таблице некорректно отображается

0 голосов
/ 02 ноября 2019

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

Я попробовал пару вещей и посмотрел их документацию с примерами без удачи.

Я сделал линейный градиент переменной, а затем включил его в условное выражение так: 

const gradient = {
  linearGradient: `(to left, #27293d 99%, #344675 1%)`
}

  const getTrProps = (rowInfo) => {
    if (rowInfo) {
      return {
        style: {
          height: `60px`,
          padding: `5px`,
          margin: `5px`,
          borderRadius: `5px`,
          backdropFilter: `blur(15px)`,
          background: rowInfo.status === 'created' ? linearGradient : `red`
        }
      }
    }
    return {};
  }

Столбец, связанный с рассматриваемым статусом, таков: 

    {
      Header: 'Status',
      accessor: 'status',
      Cell: row => (
        <div style={{
          width: `${row.value}%`
        }}>
          <span>
            { 
              row.value === 'created' ?  <GreenStatusCircle /> :
              row.value === 'awaiting_driver' ?  <YellowStatusCircle /> :
              row.value === 'delivered' ? <RedStatusCircle /> : "None Found"
            }
          </span>
        </div>
      )
    },

Это должен быть рендеринг с линейным градиентом, но вместо этого все мои строки красного цвета. Я посмотрел на пример, показанный здесь:

https://codesandbox.io/s/k3q43jpl47

И, кажется, я делаю это очень хорошо, но он не будет правильно отображаться.

1 Ответ

0 голосов
/ 07 ноября 2019

Вы можете передать его как атрибут HTML, но не как стиль

Вместо: 

const gradient = {
  linearGradient: `(to left, #27293d 99%, #344675 1%)`
}

Измените его на 

const gradient = {
  someColor: 'linear-gradient(to left, #27293d 99%, #344675 1%)'
}

и используйте его как 

const getTrProps = (rowInfo) => {
    if (rowInfo) {
      return {
        style: {
          height: `60px`,
          padding: `5px`,
          margin: `5px`,
          borderRadius: `5px`,
          backdropFilter: `blur(15px)`,
          background: rowInfo.status === 'created' ? gradient.someColor: `red`
        }
      }
    }
    return {};
  }

Пример: https://codesandbox.io/s/react-table-gettrprops-h0oht

...