Reactjs 在样式化组件中扩展样式时，是否有方法传递道具？

使用样式化组件扩展基本组件时，是否有方法从扩展组件中的基本组件访问道具？

下面是基本组件及其样式化组件。在第8行，我传入

isOpen

。在样式化组件中，我在基于

isOpen

的背景色的两种颜色之间切换

const StyledBaseComponent = styled.button`
  background-color: ${({ isOpen }) => (isOpen ? 'cyan' : 'orange')};
`
function BaseComponent(props) {
  const [isOpen, toggleOpen] = useState(false)

  return (
    <StyledBaseComponent {...props} isOpen={isOpen} onClick={() => toggleOpen(!isOpen)}>
      isOpen - {String(isOpen)}
    </StyledBaseComponent>
  )
}

---

以下是针对该问题的代码沙盒：。左按钮是基本组件，按预期工作。扩展基本组件的右按钮不会更改颜色。

一种解决方案可以是包含

类名
道具，请参见官方文档：。我无法打开你的链接，看看这是否有效

第二种解决方案是将颜色作为道具传递到
BaseComponent
中，并使用
BaseComponent
所需的默认颜色：

const { openColor = "cyan", closedColor = "orange" } = this.props;

return (
  <StyledBaseComponent
    isOpen={isOpen}
    onClick={() => this.toggleOpen()}
    openColor={openColor}
    closedColor={closedColor}
  >
    isOpen - {String(isOpen)}
  </StyledBaseComponent>
)

范例

另一种可能的解决方案是在
BaseComponent
中将样式化组件作为prop传递。
比如：

const StyledBaseComponent = styled.button`
  background-color: ${({ isOpen }) => (isOpen ? "cyan" : "orange")};
`;

const StyledExtendedComponent = styled(StyledBaseComponent)`
  background-color: ${({ isOpen }) => (isOpen ? "pink" : "yellow")};
`;

function App() {
  return (
    <div className="App">
      <BaseComponent MyButtom={StyledBaseComponent} />
      <BaseComponent MyButtom={StyledExtendedComponent} />
    </div>
  );
}

请看一个例子。您可以使用钩子实现相同的功能

export function ExtendedComponent() {
  return <BaseComponent openColor="pink" closedColor="yellow" />;
}

const StyledBaseComponent = styled.button`
  background-color: ${({ isOpen }) => (isOpen ? "cyan" : "orange")};
`;

const StyledExtendedComponent = styled(StyledBaseComponent)`
  background-color: ${({ isOpen }) => (isOpen ? "pink" : "yellow")};
`;

function App() {
  return (
    <div className="App">
      <BaseComponent MyButtom={StyledBaseComponent} />
      <BaseComponent MyButtom={StyledExtendedComponent} />
    </div>
  );
}

  render() {
    const { isOpen } = this.state;
    const { MyButtom } = this.props;

    return (
      <MyButtom isOpen={isOpen} onClick={() => this.toggleOpen()}>
        isOpen - {String(isOpen)}
      </MyButtom>
    );
  }