如何将媒体查询与 emotion/styled/macro 一起使用？

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;

演示（拖动中间条left/right调整Browser选项卡的大小以触发样式更改）：

如何将媒体查询与 emotion/styled/macro 一起使用？

How can I use media query with emotion/styled/macro?

emotion

reactjs