如何使用"onclick"更改ListItem元素的样式.事件? [英] How to change the styles of ListItem element with the "onclick" event?

问题描述

我的目标是当我单击ListItem时，它应该更改 background-color 和 text:"line-through" .然后，如果我再次单击，则应取消这些更改.
但这对我来说很奇怪.我只是不明白为什么为什么 ListItem 仅在单击窗口的任何位置后才更改 background-color ?以及为什么只有在我将指针移到元素之外之后，进入ListItem的文本才会被划掉

  const styles =()=>({项目清单: {borderRadius:"1em"}，listItemDone:{borderRadius:"1em"，backgroundColor:#F6F6E8"，textDecoration:直通"}，iconButton:{内边距:5}，重要的: {颜色:#00ACE9"，fontWeight:粗体"}});TodoListItem类扩展了Component {状态= {完成:错误};onClickItem =()=>{this.setState({完成:！this.state.done});};使成为() {const {label，Important = false，classes} = this.props;const {done} = this.state;返回 (< ListItemonClick = {this.onClickItem}className = {完成?classes.listItemDone:classes.listItem}按钮分频器>< ListItemTextprimary = {label}classes = {{主要:重要吗?classes.important:"}}/></ListItem>);}} 

解决方案

每当您尝试覆盖Material-UI样式并且无法正常工作时，最好的资源就是源代码.这是 ListItem 源代码的URL:

My goal is when I click on a ListItem, it should change the background-color and text: "line-through". And then, if I click again, these changes should be canceled.
But it happens very strangely for me. I just can't understand why ListItem changes background-color only after I click to any place of the window? And why text into ListItem becomes crossed out only after I move pointer beyond the element

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>
    );
  }
}

解决方案

Whenever you are trying to override Material-UI styles and it isn't working like you would expect, the best resource is the source code. Here is the URL for the ListItem source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ListItem/ListItem.js. For the most part, you only need to look at the styles variable near the top of the source file.

Below I've copied all of the portions of the styles variable that deal with backgroundColor and 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: {},
});

The main styles causing difficulty are the button hover and focus styles. In order to override these successfully without resorting to "!important", you need to have the appropriate CSS specificity.

The following seems to do the trick:

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

However, the above prevents there from being any hover effect on "done" items, so you may instead want to do something more like:

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

This allows the hover background color of done items to still be theme.palette.action.hover. If you want the hover color to be different for done items, you can specify it explicitly along with the textDecoration.

There is one other detail to take care of. If you click a list item to put it in a "done" state and then click it again, it will not be in the "done" state anymore but it will have the button focus styles applied. In order to remove that focus styling, you also need the following:

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

Here is my modified version of your sandbox:

这篇关于如何使用"onclick"更改ListItem元素的样式.事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！