Есть ли способ передать реквизит при расширении стилей в стилизованных компонентах?

Question

При расширении базового компонента с использованием стилизованных компонентов, есть ли способ получить доступ к реквизиту из базового компонента в расширенном компоненте?

Вот базовый компонент и его стилизованный компонент.В строке 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>
  )
}

Вот расширенный компонент и его стилизованный компонент.В строке 2 я пытаюсь использовать isOpen от родителя для переключения цветов, но он не определен, поэтому цвет всегда будет yellow.

const StyledExtendedComponent = styled(BaseComponent)`
  background-color: ${({ isOpen }) => (isOpen ? 'pink' : 'yellow')};
`
function ExtendedComponent() {
  return <StyledExtendedComponent />
}

Вот коды и поле для проблемы: https://codesandbox.io/s/4q60qqx027. Левая кнопка, являющаяся базовым компонентом, работает как положено.Правая кнопка, расширяющая базовый компонент, не меняет цвета.

Answer 1

Одним из решений может быть включение className prop, см. В официальной документации: styling-any-components .Я не могу открыть вашу ссылку, чтобы посмотреть, сработает ли это.

Вторым решением было бы передать цвета в качестве реквизита в BaseComponent и иметь цвета по умолчанию те, которые BaseComponentнужно:

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

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

Итак, в ExtendedComponent

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

пример здесь

Другое возможное решение будет передавать стилизованный компонент как опору в BaseComponent.Примерно так:

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

и в BaseComponent

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

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

см. Пример здесь .Вы можете достичь того же, используя крючки.