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',
});

关于这个问题我有两个问题。首先，这两种语法的具体名称是什么。我很难在 google 上找到他们的名字。其次，我想知道如何将媒体查询放入语法 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 安装一个模块，但是有没有不这样做的解决方案

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;
  }
`;

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

Styled-component and Material component (Media queries)

javascript

media-queries

reactjs

material-ui

styled-components