Question

Emotion文档告诉我们如何make reusable media queries在CSS道具中工作。这使我们可以在CSS道具中进行以下查询：

<div
  css={{
    color: 'green',
    [mq[0]]: {
      color: 'gray'
    },
    [mq[1]]: {
      color: 'hotpink'
    }
  }}
>

其中mq[0]和mq[1]引用断点数组中的前两个项目。例如：const breakpoints = [576, 768, 992, 1200]。

此外，this article通过展示如何使用断点对象来获取已命名的可重用媒体查询的方式，将其向前迈进了一步。首先，根据情感文档创建类似的功能，但针对对象：

const mq = n => {
  const bpArray = Object.keys(bp).map(key => [key, bp[key]]);

  const [result] = bpArray.reduce((acc, [name, size]) => {
    if (n === name) return [...acc, `@media (min-width: ${size}px)`];
    return acc;
  }, []);

  return result;
};

然后，这允许我们使用命名的媒体查询创建断点对象：

// object
const breakpoints = {
  sm: 500,
  md: 768,
  lg: 992,
  xl: 1200
};


// query
${mq('sm')} { 
  color: gray;
}

到目前为止，很好。

我现在想在情感风格的组件中执行类似的操作。这样，我创建了一个断点对象，并具有与上一篇文章中提到的相同的功能。

然后，我尝试在情感样式组件中使用速记媒体查询-像这样：

import styled from '@emotion/styled'

const Container = styled.div`
  ${mq('sm')`max-width: 750px;`}
  ${mq('md')`max-width: 970px;`}
  ${mq('lg')`max-width: 1170px`}
`

但是当我尝试这样做时，它不起作用。我收到以下错误消息：

TypeError: Object(...) is not a function

您知道为什么会发生这种情况吗，我能做些什么使它起作用？

谢谢。

Answer 1

为澄清起见，OP发布的内容主要有一个小语法错误（插值字符串中不应有其他反引号）。

他的代码的完整示例（包括类型注释）如下所示：

const breakpoints: { [index: string]: number } = {
  sm: 500,
  md: 768,
  lg: 992,
  xl: 1200,
};

const mq = Object.keys(breakpoints)
  .map((key) => [key, breakpoints[key]] as [string, number])
  .reduce((prev, [key, breakpoint]) => {
    prev[key] = `@media (min-width: ${breakpoint}px)`;
    return prev;
  }, {} as { [index: string]: string });

const Container = styled.div`
  ${mq["sm"]} {
    max-width: 750px;
  }
  ${mq["md"]} {
    max-width: 970px;
  }
  ${mq["lg"]} {
    max-width: 1170px;
  }
`;

情感样式组件中的媒体查询

1 个答案: