Question

我的目标是，当我点击一个列表项，它应改变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

因此，我尝试将！important 添加到此样式中，并且该样式按预期开始工作：

[ { dist: 1.2152494565059755, id: '37000' },
  { dist: 2.168068558345124, id: '09000' },
  { dist: 5.226238485876963, id: '04000' },
  { dist: 5.278968876845613, id: '29000' },
  { dist: 10.681310440202585, id: '58000' },
  { dist: 15.117353720958263, id: '80000' },
  { dist: 16.528082434902654, id: '58000' } ]

demo。它看起来像这样的材料UI 只是覆盖您的样式（textDecoration和的backgroundColor）当你将鼠标悬停在元素。希望有帮助。

Answer 2

每当您尝试覆盖Material-UI样式并且无法正常工作时，最好的资源就是源代码。这是ListItem源代码的URL：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
    }
  },

这是我对您的沙箱的修改版本：

如何改变风格的ListItem元素与“点击”事件？

2 个答案: