1

我可以使用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 有一个风格化系统频道，图书馆作者在那里，但遗憾的是我无法在那里发送任何消息（不断的网络错误）

例子

4

2 回答 2

4

好的，所以根据文档（https://styled-system.com/custom-props/），为了创建自定义道具（或者在这种情况下，替换现有道具），您应该使用该system实用程序。由于我不是这个库的用户styled-system（

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

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

看看这是不是你要找的东西！:)

于 2020-07-27T11:56:13.157 回答
0

我知道您已经将其标记为已解决，而 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>
于 2021-02-18T19:48:25.397 回答