是否可以在样式组件中使用媒体选择器来设置属性？答案

【问题标题】：Is it possible to use media selector in styled-components to set attributes?是否可以在样式组件中使用媒体选择器来设置属性？
【发布时间】：2020-11-10 03:56:33
【问题描述】：

是否可以这样做：

const ResponsiveDiv = styled.div.attrs({
    @media (max-width: 700px) {
        className: 'lg';
    }
})``;

【问题讨论】：

标签： reactjs media-queries responsive styled-components

【解决方案1】：

可以在样式化组件中使用媒体查询。您可以创建一个包装器组件来包装响应式内容。

const ResponsiveDiv = styled.div`
  @media (max-width: 700px) {
    // your styles here
  }
`;

用法

render() {
  <ResponsiveDiv>
    // content goes here
  </ResponsiveDiv>
}

参考here

【讨论】：

我明白了。我想避免放置具有不同属性的相同组件，即 ,

【解决方案2】：

我没有找到使用 styled-components 的方法，但您有一种使用 matchMedia 窗口属性的解决方法。

这是我的例子：
我有一个组件来显示具有特定数量的子级的分页，具体取决于屏幕宽度

<PaginatedElements
    renderChildren={renderImage}
    multipleChildren={3}
    elements={data} />

我想根据 @media 更改 multipleChildren 属性。

我创建了一个新组件ResponsivePaginatedElements，使用window.matchMedia，它是css媒体查询到JS的翻译，根据宽度显示正确的PaginatedElements：

function    ResponsivePaginatedElements(props) {
    if (window.matchMedia('(min-width: 1200px)').matches)
        return (<PaginatedElements multipleChildren={3} {...props} />);
    if (window.matchMedia('(min-width: 992px)').matches)
        return (<PaginatedElements multipleChildren={3} {...props} />);
    if (window.matchMedia('(min-width: 768px)').matches)
        return (<PaginatedElements multipleChildren={2} {...props} />);
    if (window.matchMedia('(min-width: 576px)').matches)
        return (<PaginatedElements multipleChildren={1} {...props} />);
    if (window.matchMedia('(min-width: 0px)').matches)
        return (<PaginatedElements multipleChildren={1} {...props} />);
}

<ResponsivePaginatedElements
    renderChildren={renderImage}
    elements={data} />

【讨论】：