如何使用带有情感/样式/宏的媒体查询？

Question

我找不到任何使用带有媒体查询的样式宏的代码，也不明白为什么使用emotion/styled/macro 找到代码是如此罕见。

我知道它允许对象文字中的 css 样式

const StyledUl = styled("ul")(
    {
        backgroundColor: "#fff",
        height: "200px",
        width: "100%",
        overflowY: "scroll",
        position: "absolute",
        margin: 0,
        padding: "5px",
        boxShadow: "-1px 15px 34px -21px rgba(0,32,86,0.21)",
        boxSizing: "border-box",
        borderRadius: "8px",
        zIndex: 9999,
    }
)

但是如何使用media 查询呢？ 我在哪里可以找到有关 emotion/styled/macro 的文档？

Answer 1

没有什么特别的要求。只需添加一个@media ... 查询作为属性：

import styled from "@emotion/styled/macro";

const StyledUl = styled("ul")({
  "@media (max-width: 600px)": {
    backgroundColor: "#000",
    color: "#fff"
  },
  backgroundColor: "#fff",
  height: "200px",
  width: "calc(100% - 40px)",
  overflowY: "scroll",
  position: "absolute",
  margin: 0,
  padding: "5px",
  boxShadow: "-1px 15px 34px -21px rgba(0,32,86,0.21)",
  boxSizing: "border-box",
  borderRadius: "8px",
  zIndex: 9999
});

export default StyledUl;

您可以选择使用模板文字来设置styled.HTMLElement 的样式：

import styled from "@emotion/styled/macro";

const StyledUlTemplate = styled.ul`
  @media (max-width: 600px) {
    background-color: #000;
    color: #fff;
  }

  background-color: #fff;
  height: 200px;
  width: calc(100% - 40px);
  overflow-y: scroll;
  position: absolute;
  top: 60%;
  margin: 0;
  padding: 5px;
  box-shadow: -1px 15px 34px -21px rgba(0, 32, 86, 0.21);
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 9999;
`;

export default StyledUlTemplate;

演示（左右拖动中间条以调整Browser标签的大小以触发样式更改）：