如何将道具传递给样式化组件中的基础组件？

Question

举个例子，假设我有一个组件可以接受这样的道具：

const testComponent = (props: {isBold: boolean}) => {
   if(props.isBold)
     return <strong><div>hello</div></strong>
   return <div>hello</div>
    
}

在这种情况下，我的示例组件可以接受道具，结果取决于给它的道具。

现在，如果我在 styled-components 中扩展这个组件，我怎样才能将我的 props 传递到基础组件中？这个想法是这样的：

const styledTestComponent = styled(testComponent({isBold: true}))`
    width: 100%;
    opacity: 0.5
    /* etc etc... */
`

好吧，显然行不通。这部分会失败：styled(testComponent({isBold: true}))

但我的想法是，我想做的是使用 CSS 来设置组件的特定实例的样式。所以在那种情况下，我需要将预定义的道具传递给基本组件，testComponent.

我怎样才能做到这一点？

更新：

我想出了一个简单的例子来说明这个问题。下面的代码尝试将 React 组件 MyCustomImage 设置为样式化组件 StyledMyCustomImage。当这是运行时，您可以看到 StyledMyCustomImage 确实将自己呈现为 MyCustomImage。但是，未应用 CSS 样式。

const MyCustomImage = props => (
  <img
    src={`https://dummyimage.com/${props.width}x${props.height}/619639/000000`}
  />
);

const StyledMyCustomImage = styled(MyCustomImage)`
  border: 2px dotted red;
`;

function App() {
  return (
    <div className="App">
      <h3>Test passing props from styled component to base component</h3>
      <StyledMyCustomImage width="600" height="400" />
    </div>
  );
}

我为此演示创建了一个沙箱：https://codesandbox.io/s/k21462vjr5

更新 2：

哦！感谢@SteveHolgado 的回答，我已经开始工作了！我不知道有样式的组件会将 CSS 作为 prop 传递给它的基础组件！这是添加 class 名称后的代码以供将来参考：

const MyCustomImage = props => (
  <img
    src={`https://dummyimage.com/${props.width}x${props.height}/619639/000000`}
    className={props.className}
  />
);

const StyledMyCustomImage = styled(MyCustomImage)`
  border: 2px dotted red;
`;

工作演示的sadnbox：https://codesandbox.io/s/j4mk0n8xkw

Answer 1

试试这个，它应该有效

const StyledTestComponent = styled(testComponent)`
    width: 100%;
    opacity: 0.5
    /* etc etc... */
`

并以这种方式将 prop 传递给实例。

<StyledTestComponent isBold />

欢迎提供反馈。我还没有检查它是否工作，但感觉它会工作

注意：我检查过它正在运行。应该适合你。

Answer 2

当你像这样使用 styled 函数时，你的包装组件将传递一个名为 className 的道具，你需要将其应用于你想要的元素影响的样式：

const testComponent = (props) => {
  return <div className={props.className}>hello</div>
}

您将可以使用您的样式中的所有道具，您可以像这样使用它们：

const styledTestComponent = styled(testComponent)`
  width: 100%;
  opacity: 0.5;
  font-weight: ${props => props.isBold ? "bold" : "normal"};

  /* etc etc... */
`

如何将道具传递给样式化组件中的基础组件？

How can I pass props to base component in styled-component?

javascript

reactjs

styled-components

更新：

更新 2：