使用React和情感JS进行媒体查询

Question

我创建了一个样式化的组件容器，并根据情感js文档传递媒体查询。但是媒体查询没有按预期进行。

这是尝试的方法：

import styled, { css } from 'react-emotion';
const breakpoints = {
  tall: '(max-width: 1366px) and (min-height: 1024px)'
};

const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
  const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
  const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
  accumulator[label] = (cls /* eslint-disable-line */) =>
    css`
      @media (${prefix + breakpoints[label] + suffix}) {
        ${cls};
      }
    `;
  return accumulator;
}, {});
export const HeaderStyles = {
  DesktopContainer: styled('div')`
    max-width: 1280px;
    width: calc(100% - 230px);
    margin: 0 115px;
    height: 100px;
    display: block;
    @media (max-width: 1024px) {
      display: none;
    }
    ${mq.tall(css`
      display: none;
    `)};
  `,
  MobileContainer: styled('div')`
    max-width: 100%;
    display: none;
    @media (max-width: 1024px) {
      display: block;
    }
    ${mq.tall(css`
      display: block;
    `)};
  `
};