Fix transient props for styled-components v6

This commit is contained in:
jeffvli
2023-09-22 02:34:57 -07:00
parent bb9bf7ba6a
commit 1a87adb728
24 changed files with 96 additions and 92 deletions
@@ -1,19 +1,19 @@
import styled from 'styled-components';
export const ResizeHandle = styled.div<{
isResizing: boolean;
placement: 'top' | 'left' | 'bottom' | 'right';
$isResizing: boolean;
$placement: 'top' | 'left' | 'bottom' | 'right';
}>`
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
top: ${(props) => props.$placement === 'top' && 0};
right: ${(props) => props.$placement === 'right' && 0};
bottom: ${(props) => props.$placement === 'bottom' && 0};
left: ${(props) => props.$placement === 'left' && 0};
z-index: 90;
width: 4px;
height: 100%;
cursor: ew-resize;
opacity: ${(props) => (props.isResizing ? 1 : 0)};
opacity: ${(props) => (props.$isResizing ? 1 : 0)};
&:hover {
opacity: 0.7;
@@ -21,10 +21,10 @@ export const ResizeHandle = styled.div<{
&::before {
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
top: ${(props) => props.$placement === 'top' && 0};
right: ${(props) => props.$placement === 'right' && 0};
bottom: ${(props) => props.$placement === 'bottom' && 0};
left: ${(props) => props.$placement === 'left' && 0};
width: 1px;
height: 100%;
content: '';