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%;
  }
});

當我嘗試使用此語法時，它會顯示。 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;
  }
`;