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

View file

@ -1,6 +1,6 @@
import styled from 'styled-components';
export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>`
export const LibraryBackgroundOverlay = styled.div<{ $backgroundColor?: string }>`
position: absolute;
z-index: -1;
width: 100%;
@ -8,7 +8,7 @@ export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>
min-height: 200px;
pointer-events: none;
user-select: none;
background: ${(props) => props.backgroundColor};
background: ${(props) => props.$backgroundColor};
background-image: var(--bg-subheader-overlay);
opacity: 0.3;
`;

View file

@ -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: '';