onClick 不适用于移动视图中的按钮样式组件答案

【问题标题】：onClick doesn't work on Button Style Component in Mobil ViewonClick 不适用于移动视图中的按钮样式组件
【发布时间】：2021-12-13 03:35:29
【问题描述】：

我有一个 styled.button 可以在桌面视图上完美运行，但是当我在桌面上切换到移动视图时它根本不起作用。

按钮：

const DateElement = styled.button`
  background-color: ${(props) => (props.primary ? '#DEE2FF' : '#696B86')};
  color: ${(props) => (props.primary ? 'black' : '#dedee4')};
  box-shadow: none;
  padding: 9px;
  width: 90px;
  text-align: center;
  height: 90px;
  user-select: none;
  border: 1px solid rgba(20, 79, 118, 0.2);
  & :hover {
    cursor: pointer;
  }
  & :focus {
    display: none;
  }
  ${(theme) => theme.theme.breakpoints.down('sm')} {
    padding: 3px;
    width: 70px;
    text-align: center;
    height: 70px;
  }
`;

渲染：

return (
        <DateElement
          key={date.getTime()}
          primary={isSelected}
          onClick={() => handleClick(date)}
          className={clsx({
            [classes.crossed]: date.getTime() + endTimeMilli < today.getTime(),
            [classes.containerWidth]: dates.length > 4,
          })}
        >
          <Typography className={classes.date}>{getWeekDay(date)}</Typography>
          <Typography className={classes.month}>{getMonth(date)}</Typography>
          <Typography className={classes.day}>{date.getDate()}</Typography>
        </DateElement>
      );

有什么问题？我该如何解决这个问题？

【问题讨论】：

标签： reactjs mobile onclick styled-components

【解决方案1】：

我最终修复了它，将样式组件从按钮更改为 div，我只是更改它并且它工作，我仍然不明白为什么或如何工作，但它工作。

const DateElement = styled.div`

【讨论】：

【解决方案2】：

是因为你使用的是theme.theme吗？

${(theme) => theme.theme.breakpoints.down('sm')} {..

我可能是错的，但不是根据文档通常看起来的样子：https://mui.com/customization/breakpoints/

【讨论】：

它是用 Styled Components 而不是 Material UI 创建的