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

Question

I have some difficulty to understand media queries with MUI and styled component. I understand that this following syntax is from styled-component

Syntax 1:

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

and there is this one,

Syntax 2:

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

I have two questions related to this question. First, what is the specific name for both syntax. I have some difficulty to find their name on google. Second, I'd like to know how to put the media query in the syntax 2 to be similar like the next syntax below.

Syntax that doesn't work:

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

When I'm trying to use this syntax, it says./src/pages/homepage.jsx SyntaxError: C:\Users\David\Desktop\website\app\src\pages\homepage.jsx: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (58:5):

I searched on stack overflow for this error and it says to npm install a module, but is there a solution without doing that

Answer 1

Nvm I found it, I just need to do that

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

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

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