javascript — динамические значения CSS в реквизитах, которые не обновляются с помощью Emotion ( TS)

Динамические значения CSS в реквизитах не обновляются с помощью Emotion ( TS)

Попытка использовать условные реквизиты в некоторых стилях для моего проекта с Emotion, чтобы получить динамические значения для некоторых свойств. В самом компоненте реквизиты обновляются от родителя и передаются вниз, но значения css не обновляются в зависимости от них. Я предполагаю, что это статические от монтирования, но я бы вообразил на повторной рендеринга они тоже обновляются?

Для надуманного примера:

 const Component: React.FC{amp}lt;IOverlayProps{amp}gt; = ({ isShowing }) ={amp}gt; { console.log('isShowing from parent: ', isShowing); // successfully updating: true ={amp}gt; false ={amp}gt; true return ( {amp}lt;{amp}gt; {amp}lt;Overlay /{amp}gt; {amp}lt;div{amp}gt; ... {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt; ) } 
 const Overlay = styled.div{amp}lt;IOverlayProps{amp}gt;` // ... opacity: ${props ={amp}gt; (props.isShowing ? 1 : 0)}; // never updates from false case ` 

Я также пытался с синтаксисом объекта

 const Overlay = styled('div')( { // ... }, (props: IOverlayProps) ={amp}gt; ({ opacity: ${props ={amp}gt; (props.isShowing ? 1 : 0)}, }) ); 

Я также попытался добавить локальное состояние, которое будет обновляться при смене реквизита, чтобы гарантировать повторный рендеринг компонента:

 const [localShowing, setLocalShowing] = React.useState(isShowing); React.useEffect(() ={amp}gt; setLocalShowing(s ={amp}gt; !s), [isShowing]) 

Кто-нибудь может указать, как / если это может работать?

Пакеты:

 "@emotion/core": "^10.0.21", "@emotion/styled": "^10.0.17", "react": "^16.10.2", "react-dom": "^16.10.2", "typescript": "3.6.4" 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector