Fix warnings
Refs: https://stackoverflow.com/questions/69730364/what-is-the-purpose-of-shouldforwardprop-option-in-styled
This commit is contained in:
parent
d30a8b8033
commit
0a93ba67a1
|
@ -111,14 +111,13 @@ function getShrinkRatio(width: number, columns: number) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const ListContainer = styled(Box)<{
|
const ListContainer = styled(Box, {
|
||||||
columns: number;
|
shouldForwardProp: (propName) => propName != "gridTemplateColumns",
|
||||||
shrinkRatio: number;
|
})<{
|
||||||
groups?: number[];
|
gridTemplateColumns: string;
|
||||||
}>`
|
}>`
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: ${({ columns, shrinkRatio, groups }) =>
|
grid-template-columns: ${(props) => props.gridTemplateColumns};
|
||||||
getTemplateColumns(columns, shrinkRatio, groups)};
|
|
||||||
grid-column-gap: ${GAP_BTW_TILES}px;
|
grid-column-gap: ${GAP_BTW_TILES}px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -235,9 +234,11 @@ const PhotoListRow = React.memo(
|
||||||
return (
|
return (
|
||||||
<ListItem style={style}>
|
<ListItem style={style}>
|
||||||
<ListContainer
|
<ListContainer
|
||||||
columns={columns}
|
gridTemplateColumns={getTemplateColumns(
|
||||||
shrinkRatio={shrinkRatio}
|
columns,
|
||||||
groups={timeStampList[index].groups}
|
shrinkRatio,
|
||||||
|
timeStampList[index].groups,
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{renderListItem(timeStampList[index], isScrolling)}
|
{renderListItem(timeStampList[index], isScrolling)}
|
||||||
</ListContainer>
|
</ListContainer>
|
||||||
|
|
|
@ -23,7 +23,9 @@ export const SearchMobileBox = styled(FluidContainer)`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
|
export const SearchInputWrapper = styled(CenteredFlex, {
|
||||||
|
shouldForwardProp: (propName) => propName != "isOpen",
|
||||||
|
})<{ isOpen: boolean }>`
|
||||||
background: ${({ theme }) => theme.colors.background.base};
|
background: ${({ theme }) => theme.colors.background.base};
|
||||||
max-width: 484px;
|
max-width: 484px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
import { styled } from "@mui/material";
|
import { styled } from "@mui/material";
|
||||||
import { FlexWrapper } from "../../components/Container";
|
import { FlexWrapper } from "../../components/Container";
|
||||||
const NavbarBase = styled(FlexWrapper)<{ isMobile: boolean }>`
|
|
||||||
|
const NavbarBase = styled(FlexWrapper, {
|
||||||
|
shouldForwardProp: (propName) => propName != "isMobile",
|
||||||
|
})<{ isMobile: boolean }>`
|
||||||
min-height: 64px;
|
min-height: 64px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
Loading…
Reference in a new issue