Question

是否可以执行以下操作：

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

Answer 1

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

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

用法

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

引用here

Answer 2

我没有找到使用样式化组件的方法，但是您可以使用matchMedia window属性来解决。

这是我的例子：
我有一个组件来显示带有特定数量的孩子的分页，具体取决于screenWidth

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

我想根据multipleChildren来更改@media道具。

我使用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} />

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

2 个答案: