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

Question

Emotion 文档告诉我们如何制作可在 css 道具中使用的可重用媒体查询。这允许我们在 css prop 中进行以下查询：

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

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

此外，本文更进一步，展示了如何使用断点对象获取命名的可重用媒体查询。它首先根据情感文档制作类似的功能，但对于对象：

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;
  }
`;