Как изменить стили элемента ListItem с помощью события «onclick»?

Question

Моя цель - когда я нажимаю на ListItem, он должен изменить background-color и text: "line-through".И потом, если я нажму еще раз, эти изменения должны быть отменены.
Но это происходит очень странно для меня.Я просто не могу понять, почему ListItem меняет background-color только после того, как я щелкну в любом месте окна?И почему текст в ListItem становится перечеркнутым только после того, как я переместил указатель за элемент

const styles = () => ({
  listItem: {
    borderRadius: "1em"
  },

  listItemDone: {
    borderRadius: "1em",
    backgroundColor: "#F6F6E8",
    textDecoration: "line-through"
  },

  iconButton: {
    padding: 5
  },

  important: {
    color: "#00ACE9",
    fontWeight: "bold"
  }
});

class TodoListItem extends Component {
  state = {
    done: false
  };

  onClickItem = () => {
    this.setState({
      done: !this.state.done
    });
  };

  render() {
    const { label, important = false, classes } = this.props;
    const { done } = this.state;

    return (
      <ListItem
        onClick={this.onClickItem}
        className={done ? classes.listItemDone : classes.listItem}
        button
        divider
      >
        <ListItemText
          primary={label}
          classes={{ primary: important ? classes.important : "" }}
        />
      </ListItem>
    );
  }
}

Answer 1

Всякий раз, когда вы пытаетесь переопределить стили Material-UI и он не работает так, как вы ожидаете, лучшим ресурсом является исходный код.Вот URL для исходного кода ListItem: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ListItem/ListItem.js. В большинстве случаев вам нужно только посмотреть на переменную styles в верхней части исходного файла.

Ниже яСкопированы все части переменной styles, которые имеют дело с backgroundColor и textDecoration:

export const styles = theme => ({
  /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
  root: {
    textDecoration: 'none',
    '&$selected, &$selected:hover, &$selected:focus': {
      backgroundColor: theme.palette.action.selected,
    },
  },
  /* Styles applied to the inner `component` element if `button={true}`. */
  button: {
    transition: theme.transitions.create('background-color', {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      textDecoration: 'none',
      backgroundColor: theme.palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&:focus': {
      backgroundColor: theme.palette.action.hover,
    },
  },
  /* Styles applied to the root element if `selected={true}`. */
  selected: {},
});

Основными вызывающими трудности стилями являются button стили наведения и фокуса.Чтобы успешно их переопределить, не прибегая к «! Important», вам необходимо иметь соответствующую специфику CSS.

Кажется, что сработает следующее:

  listItemDone: {
    borderRadius: "1em",
    "&,&:focus,&:hover": {
      backgroundColor: "#F6F6E8",
      textDecoration: "line-through"
    }
  },

Однако вышеприведенноепредотвращает какой-либо эффект наведения на «готовые» предметы, поэтому вместо этого вы можете захотеть сделать что-то более похожее на:

  listItemDone: {
    borderRadius: "1em",
    "&,&:focus": {
      backgroundColor: "#F6F6E8",
      textDecoration: "line-through"
    },
    "&:hover": {
      textDecoration: "line-through"
    }
  },

Это позволяет цвету фона наведения на готовых предметах по-прежнему быть theme.palette.action.hover.Если вы хотите, чтобы цвет наведения был другим для готовых элементов, вы можете указать его явно вместе с textDecoration.

Есть еще одна деталь, о которой нужно позаботиться.Если щелкнуть элемент списка, чтобы перевести его в состояние «готово», а затем снова щелкнуть по нему, он больше не будет находиться в состоянии «готово», но к нему будут применены стили фокусировки button.Чтобы удалить этот стиль фокуса, вам также необходимо следующее:

  listItem: {
    borderRadius: "1em",
    "&,&:focus": {
      backgroundColor: theme.palette.background.paper // or whatever color you want this to be
    }
  },

Вот моя модифицированная версия вашей песочницы:

Answer 2

Итак, я попытался добавить ! Важный к этим стилям, и он начал работать, как и ожидалось:

  listItemDone: {
    borderRadius: "1em",
    backgroundColor: "#F6F6E8 !important",
    textDecoration: "line-through !important"
  },

демо .Это выглядит так: material-ui просто переопределяет ваши стили (textDecoration и backgroundColor) при наведении курсора на элементы .Надеюсь, это поможет.