如何使用样式系统响应式道具

Question

我可以使用 styled-system 来实现这样的目标吗？

<MyComponent  
  backgroundImage={{
    default: "https://placekitten.com/380/80",
    sm: "https://placekitten.com/340/80"
  }}
/>

或这个（因为我知道它也可以用其他“样式道具”来完成，例如 width，但我更喜欢使用带键的对象）：

<MyComponent  
  backgroundImage={[
    "https://placekitten.com/300/80",
    "https://placekitten.com/500/80"
  ]}
/>

我认为上面的代码示例是自我描述的，它们遵循库的模式，但为了清楚起见，我将值（图像源）映射到断点（默认和下一个断点）。

例如，开箱即用：

<Box
  width={[
    default: 1,
    sm: 1/3,
  ]}
/>

输出是这样的：

.QWojd {
    width: 100%;
}

@media screen and (min-width: 24em) {
    .QWojd {
        width: 33.33333333333333%;
    }
}

我一直在研究源代码，这部分让我认为它也应该与 backgroundImage 一起使用：

遗憾的是，它不起作用，结果是 CSS 输出中的字符串化对象（或连接的数组值）。

我想不出 variant 函数在这里有什么用处，就像人们建议的那样。我试过使用 system 函数，但我就是看不懂文档。 ResponsiveValue 类型给了我一个提示，但当我试图了解内部结构时，我感觉就像在黑暗中爬行。

最终，我想将“断点对象”（或数组）与我喜欢的任何自定义道具一起使用，如下所示：

<Box
  myProp={[
    default: 'foo',
    sm: 'bar',
  ]}
/>

注意：我（从经验中）了解到您可以只使用“断点数组”版本（无需在主题中设置断点并将其传递给提供者）并将值映射到前 2 个默认断点（不确定它们来自哪里）但是如果你想使用带有键的对象，你需要使用 ThemeProvider 和带有你自己的断点的主题对象。

注意 2：到目前为止，我可以理解样式化系统文档：https://styled-system.com/custom-props。当我到达这里时，我觉得这就是我要找的东西，但是我看不懂例子，解释更让我困惑，我在网上找不到任何例子。

注意 3：Spectrum Chat 有一个风格系统频道，图书馆作者在那里，但遗憾的是我无法在那里发送任何消息（持续网络错误）

Examples

Answer 1

好的，所以根据文档 (https://styled-system.com/custom-props/)，为了创建自定义道具（或者在这种情况下，替换现有道具），您应该使用 system 实用程序。由于我不是该库的用户 (styled-system)，我不能 100% 确定这是正确的方法，但我在您的示例代码之上进行了测试，它似乎可以按您的要求工作。

带有数组的组件声明（它也适用于您想要的对象）：

<ResponsiveImageBox
  color="white"
  backgroundImage={[
    "https://placekitten.com/300/80",
    "https://placekitten.com/500/80"
  ]}
>
  Box 8
</ResponsiveImageBox>

对象：

<ResponsiveImageBox
  color="white"
  backgroundImage={{
    default: "https://placekitten.com/300/80",
    sm: "https://placekitten.com/500/80"
  }}
>
  Box 8
</ResponsiveImageBox>

这是组件代码：

export const ResponsiveImageBox = styled(Box)(
  ({ myCustomProp }) => { 
    return css`
      ${system({
        backgroundImage: {
          property: "backgroundImage",
          transform: value => `url(${value})`
        }
      })}
    `
  });

正如您在示例 4、5 和 8 (https://stackblitz.com/edit/styled-system-mccqje?file=Examples.tsx) 中看到的那样，我还对 border-radius 属性进行了简单的重命名，并仅指定了 css我想更改的属性 (property)，因此无需添加 transform，因为值将保持不变。

export const ExtendedBox2 = styled(Box)<ExtendedBoxProps>`
  background-position: center;

  ${system({
    myCustomProp: {
      property: "border-radius"
    }
  })}
`;

看看这是否是您要找的！ :)

Answer 2

我知道您已经将其标记为已解决，Eduardo 的方法绝对有效。然而，另一种“开箱即用”的方法是使用别名，这样您就可以使用对象而不是数组（来源：https://styled-system.com/responsive-styles/）：

// theme.js
const breakpoints = ['40em', '52em', '64em', '80em']

// aliases
breakpoints.sm = breakpoints[0]
breakpoints.md = breakpoints[1]
breakpoints.lg = breakpoints[2]
breakpoints.xl = breakpoints[3]

export default {
  breakpoints,
}

// ResponsiveImageBox.js
<ResponsiveImageBox
  color="white"
  backgroundImage={{
    md: "https://placekitten.com/300/80",
    sm: "https://placekitten.com/500/80"
  }}
>
  Box 8
</ResponsiveImageBox>

如何使用样式系统响应式道具

How to use styled-system responsive props

typescript

reactjs

styled-components

styled-system