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

Posted 2023-03-15

【中文标题】Styled-component 和 Material 组件（媒体查询）

【英文标题】：Styled-component and Material component (Media queries)

【发布时间】：2021-08-18 10:48:47

【问题描述】：

我很难理解带有 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，但是有没有不这样做的解决方案

【问题讨论】：

material ui 与上述问题有什么关系？无论如何你都可以写`@media $device.mobileSM`: ..

【参考方案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;
  
`;