Reactjs 如何使用风格化的系统响应道具

我可以使用样式化系统来实现这样的功能吗

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

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

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

正如人们所建议的那样，我想不出变量函数在这里有什么用处。我试图使用系统功能，但我就是不理解文档。ResponsiveValue类型给了我一个提示，但当我试图理解其内部结构时，我感觉像是在黑暗中爬行

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

.QWojd {
    width: 100%;
}

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

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

注意：我从经验中了解到，您可以只使用断点数组版本，而无需在主题中设置断点并将其传递给提供程序，这将把值映射到前两个默认断点，不确定它们来自何处，但如果您想使用带键的对象，则需要使用主题提供程序和主题对象使用您自己的断点

注2：到目前为止，我可以理解样式化系统文档：。当我来到这里时，我觉得这就是我要找的，但我不理解这个例子，这个解释让我更加困惑，我在网上找不到任何例子

注3：Spectrum Chat有一个样式化的系统频道，库作者在那里，但遗憾的是，我一直无法在那里发送任何消息，因为网络错误

---

好的，根据文档，为了创建自定义道具，或者在本例中，替换现有道具，您应该使用系统实用程序。由于我不是这个库样式系统的用户，我不能100%确定这是正确的方法，但我在您的示例代码上进行了测试，它似乎可以按照您的要求工作

组件声明也适用于您想要的数组对象：

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

正如您在示例4、5和8中所看到的，我还对border radius属性进行了简单的属性重命名，并且只指定了我想要更改属性的css属性，因此无需添加转换，因为值将保持不变

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

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

---

看看这是不是你要找的东西！：

好的，根据文档，为了创建自定义道具，或者在本例中，替换现有道具，您应该使用系统实用程序。由于我不是这个库样式系统的用户，我不能100%确定这是正确的方法，但我在您的示例代码上进行了测试，它似乎可以按照您的要求工作

组件声明也适用于您想要的数组对象：

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

正如您在示例4、5和8中所看到的，我还对border radius属性进行了简单的属性重命名，并且只指定了我想要更改属性的css属性，因此无需添加转换，因为值将保持不变

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

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

---

看看这是不是你要找的东西！：

我知道你已经将它标记为已解决，爱德华多的方法肯定有效。但是，另一种开箱即用的方法是使用别名，以便可以使用对象而不是数组源：：

//theme.js 常量断点=['40em'，'52em'，'64em'，'80em'] //别名 breakpoints.sm=断点[0] breakpoints.md=断点[1] breakpoints.lg=断点[2] breakpoints.xl=断点[3] 导出默认值{ 断点， } //ResponsiveImageBox.js 方框8

---

我知道你已经把它标记为解决了，爱德华多的方法肯定有效。但是，另一种开箱即用的方法是使用别名，以便可以使用对象而不是数组源：：

//theme.js 常量断点=['40em'，'52em'，'64em'，'80em'] //别名 breakpoints.sm=断点[0] breakpoints.md=断点[1] breakpoints.lg=断点[2] breakpoints.xl=断点[3] 导出默认值{ 断点， } //ResponsiveImageBox.js 方框8

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

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

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