Стиль, основанный на состоянии вместо реквизита

Question

Я хочу стилизовать компонент, основываясь на его состоянии (вместо реквизита), который меняется при нажатии.

Однако я не вижу способа сделать это без перетаскивания состояния в оболочку ипередавая вниз состояние в реквизит.Что кажется ненужным.Есть ли способ получить доступ к состоянию с помощью styled-компонентов?

Я хотел бы сделать что-то вроде этого:

const styledDiv = styled.div`
  background-color: ${(state) => state.x};
`

Answer 1

Лучшее, что нужно сделать, это перейти в ваше состояние в стиль-компонент в качестве реквизита.Вот так ...

JS

return (
  <div>
    <StyledDiv customPropName={this.state.x}>example text</StyledDiv>
  </div>
);

Styled-Component

const StyledDiv = styled.div`
  background-color: ${(props) => props.x};
`

Answer 2

Решение, рекомендованное разработчиками библиотеки, - подтянуть состояние.Я должен согласиться.