Стилизованный компонент с доступом к состоянию компонента React?
Как я могу заставить стилизованный компонент отображать различные правила 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: Cannot read property 'dark' of undefined at new Container
Ответы 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!
Doing so, helps the readability of you code, as well as following what the docs suggest.
Хм, я не использую ts. Но я думаю, что если вы сделаете ${(p: ElementProps)=> props.dark ...} с такими пропсами, как: type ElementProps = { dark: boolean }, это может избавить от ошибки!
Спасибо! Вот что я добавил к вашему ответу, чтобы он заработал: interface OuterWrapperProps {dark: boolean; } const OuterWrapper = styled.div <OuterWrapperProps> `...`;
Отличная идея! Я добавил к вашему ответу.
Мне это нравится, но на сайте звонка выдает ошибку. [ts] Свойство 'dark' не существует для типа 'IntrinsicAttributes & IntrinsicClassAttributes <Component <ThemedOuterStyledProps <De tailedHTMLProps <HTML Attributes <HTMLDivEl ement>, HTMLDivElement>, any>, any, any >> & Readonly <.. .> & Только для чтения <...> '. Я обнаружил эту проблему в той же теме github.com/styled-components/styled-components/issues/630 со многими предлагаемыми решениями. Я еще не понял, что лучше.