Styled-component 和 Material 组件（媒体查询）

Question

我很难理解带有 MUI 和样式组件的媒体查询。我知道以下语法来自 styled-component

语法 1：

const Video = styled.video`
  width: 860px;
  @media ${device.mobileSM} {
    width: 90%;
  }
`;

还有这个，

语法 2：

const TitleAssociation = styled(Typography)({
  fontSize: '45px',
  margin: '0px',
  fontWeight: '400',
});

我有两个与此问题相关的问题。首先，这两种语法的具体名称是什么。我很难在谷歌上找到他们的名字。其次，我想知道如何将媒体查询放在语法 2 中，使其类似于下面的下一个语法。

无效的语法：

const TitleAssociation = styled(Typography)({
  fontSize: '45px',
  margin: '0px',
  fontWeight: '400',
  @media ${device.mobileSM} {
    width: 90%;
  }
});

当我尝试使用这种语法时，它 说 ./src/pages/homepage.jsx SyntaxError：C:\Users\David\Desktop\website\app\src\pages\homepage.jsx：目前未启用对实验性语法“decorators-legacy”的支持 (58:5)：

我在堆栈溢出上搜索了这个错误，它说 npm install a module，但是有没有不这样做的解决方案

Answer 1

Nvm我找到了，我只需要这样做

const TitleAssociation = styled(Typography)`
  margin: 0px;
  font-weight: 400;
  font-size: 40px;

  @media ${device.mobileSM} {
    font-size: 30px;
  }

  @media ${device.mobileXS} {
    font-size: 21px;
  }
`;