如何在具有Material-UI的媒体查询中使用变量？

Question

我正在尝试根据接收到的布尔值更改显示值（布尔值会随着视口宽度的改变而改变）

export const SButton = styled(Button)(({ theme, hide }) => ({
  textTransform: 'none',
  height: '40px',
  fontSize: '12px',
  fontFamily: 'Open Sans',
  [theme.breakpoints.down(1064)]: {
    display: hide ? 'none' : 'block',
  },
}))

这就是我所拥有的，但是hide属性不会改变，它仍然是它需要的第一个值（似乎媒体查询完成后就无法覆盖它了）。

我尝试在媒体查询的内部和外部添加content: "${hide}"，我可以看到它在外部的变化，但它仍然是媒体查询内部的初始值。

我知道我可以通过使用useMediaQuery挂钩来做到这一点，但我正在努力避免这种情况。有什么想法吗？