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

Question

我有一个 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>
      );

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

Answer 1

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

const DateElement = styled.div`

Answer 2

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

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

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

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

onClick doesn't work on Button Style Component in Mobil View

mobile

onclick

reactjs

styled-components