React样式的组件媒体查询不能使用子元素吗？

import styled from 'styled-components';

const StyledComponent = styled.div`
  /* 其他样式 */
  
  @media (max-width: 768px) {
    /* 媒体查询样式 */
  }
`;

const MyComponent = () => {
  return <StyledComponent>内容</StyledComponent>;
};

/* styles.css */
.container {
  /* 其他样式 */
}

@media (max-width: 768px) {
  .container {
    /* 媒体查询样式 */
  }
}

import React from 'react';
import styles from './styles.css';

const MyComponent = () => {
  return <div className={styles.container}>内容</div>;
};