Как изменить цвет текста выбранной строки в таблице материалов - PullRequest
Новая
       30

Как изменить цвет текста выбранной строки в таблице материалов

3 голосов
/ 25 апреля 2019

Я пытаюсь изменить цвет текста строки и цвет фона строки при выделении.

Я могу успешно изменить цвет фона, но не могу изменить цвет текста. 

<TableRow
        className={classes.tableBody}
      >

tableBody: {
    "&:focus": {
      color: "yellow !important",
      backgroundColor: "#3D85D2 !important",
    },
  },

1 Ответ

1 голос
/ 25 апреля 2019

Цвет фона регулируется в TableRow. Чтобы получить правильную специфичность (вам никогда не нужно использовать «! Важное» при переопределении стилей Material-UI), вам нужно использовать класс «hover», аналогичный тому, что делается в TableRow.

Цвет контролируется в TableCell, так что это уровень, на котором вам нужно его контролировать.

Для рабочего решения, в стилях у вас будет что-то вроде: 

const styles = theme => ({
  tableRow: {
    "&$hover:hover": {
      backgroundColor: "blue"
    }
  },
  tableCell: {
    "$hover:hover &": {
      color: "pink"
    }
  },
  hover: {}
});

затем в рендеринге: 

            <TableRow
              hover
              key={row.id}
              classes={{ hover: classes.hover }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>

Вот рабочая версия, основанная на вашей песочнице:

Edit Table hover colors

Вот аналогичный пример, но с использованием «selected» вместо «hover»:

https://codesandbox.io/s/llyqqwmr79

Используются следующие стили: 

const styles = theme => ({
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "purple"
    }
  },
  tableCell: {
    "$selected &": {
      color: "yellow"
    }
  },
  selected: {}
});

и некоторые состояния: 

 const [selectedID, setSelectedID] = useState(null);

и изменение рендеринга TableRow на: 

            <TableRow
              hover
              key={row.id}
              onClick={() => {
                setSelectedID(row.id);
              }}
              selected={selectedID === row.id}
              classes={{ selected: classes.selected }}
              className={classes.tableRow}
            >

v4 Material-UI будет включать некоторые изменения , которые должны значительно упростить переопределение стилей (и легче понять, как это сделать успешно, не глядя на исходный код).

...