reactjs - 带有媒体查询的样式化组件不同的继承

Question

我想更改桌面/移动设备的样式化组件继承。

// Typography.js
const TextXSmall = styled.p`
  font-size: 10px;
  // ... many more attributes
`;

export const TextXS = ({ children, className }) => {
  return <TextXSmall className={className}>{children}</TextXSmall>;
};

// OtherFile.js
import { TextXS, TextXXS } from 'Framework/Styles/Typography';

const NotificationText = styled(TextXXS)`
  @media only screen and (max-width: 767px) {
    ${TextXS} // => Overwrite css here
  }
`

然而这不起作用。有什么办法可以做到这一点？我不想将媒体查询移至typography.js，因为根据站点上的位置，它可能会发生变化。

标签： reactjsstyled-components