Стилизованный компонент с доступом к состоянию компонента React?

Question

Как получить стилизованный компонент для отображения различных правил CSS в зависимости от состояния компонента React, в котором он отображается?

Ниже не работает:

class Container extends React.Component<ContainerProps, ContainerState> {
  constructor(props: ContainerProps) {
    super(props);
    this.state = {
      highlight: true,
      dark: false
    };
  }

  OuterWrapper = styled.div`
    display: inline-block;
    padding: 20px;
    ${this.state.dark && `
      background-color: 'gray';
    `};
  `;

    return (
      <this.OuterWrapper>
          ...
      </this.OuterWrapper>
    );

}

TypeError: Невозможно прочитать свойство 'dark' из undefined в новом контейнере

Answer 1

Лучший способ достичь этого - передать опору элементу, который вы получаете от styled-comopnent.

// outside of the component
interface OuterWrapperProps { 
    dark: boolean; 
}

const OuterWrapper =  styled.div<OuterWrapperProps>`
    display: inline-block;
    padding: 20px;
    ${props => props.dark && css`
        background-color: 'gray';
    `};
`; 

И когда вы визуализируете этот элемент:

...
<OuterWrapper dark={this.state.dark}> ... </OuterWrapper>
...

И у вас все еще есть контроль над темой из вашего state!

Это помогает сделать ваш код более читабельным, а также следовать тому, что предлагают документы.