问题描述
我正在使用Material-UIv5，并试图迁移到使用styled而不是makeStyles，因为这似乎是现在首选的方法。我知道使用makeStyles仍然有效，但我正在尝试改用新的样式解决方案。
我有一个表示导航链接的列表项目列表，我想突出显示当前选择的项目。下面是我如何使用makeStyles完成此操作：
interface ListItemLinkProps {
label: string;
to: string;
}
const useStyles = makeStyles<Theme>(theme => ({
selected: {
color: () => theme.palette.primary.main,
},
}));
const ListItemLink = ({ to, label, children }: PropsWithChildren<ListItemLinkProps>) => {
const styles = useStyles();
const match = useRouteMatch(to);
const className = clsx({ [styles.selected]: !!match });
return (
<ListItem button component={Link} to={to} className={className}>
<ListItemIcon>{children}</ListItemIcon>
<ListItemText primary={label} />
</ListItem>
);
};
(请注意，此处我使用clsx来确定是否应将selected样式应用于ListItem元素。)
styled实现此目的？这就是我到目前为止想出来的(注意：ListItemLinkProps的界面没有改变，所以我在这里不再重复)：
const LinkItem = styled(ListItem, {
shouldForwardProp: (propName: PropertyKey) => propName !== 'isSelected'
})<ListItemProps & LinkProps & { isSelected: boolean }>(({ theme, isSelected }) => ({
...(isSelected && { color: theme.palette.primary.main }),
}));
const ListItemLink = ({ to, label, children }: PropsWithChildren<ListItemLinkProps>) => {
const match = useRouteMatch(to);
return (
// @ts-ignore
<LinkItem button component={Link} to={to} isSelected={!!match}>
<ListItemIcon>{children}</ListItemIcon>
<ListItemText primary={label} />
</LinkItem>
);
};
那么，关于这个问题有两个问题：
这是执行条件样式的最佳方式吗？
另一个问题是我无法计算出styled声明的正确类型-由于LinkItem的类型声明方式，我必须将// @ts-ignore注释放在LinkItem之上。
推荐答案
Material-UI v5将情感用于默认样式引擎，并在内部始终如一地使用styled，以便希望使用样式组件而不是情感的用户可以更轻松地将两者都包含在捆绑包中。
虽然styledAPI可以很好地适用于许多用例，但它似乎不太适合这个特定的用例。有两个主要选项可以提供相当好的DX。
sx功能)。以下是演示此方法的one of the List demos的修改(使用自定义ListItemButton模拟ListItemLink的角色)：
import * as React from "react";
import Box from "@material-ui/core/Box";
import List from "@material-ui/core/List";
import MuiListItemButton, {
ListItemButtonProps
} from "@material-ui/core/ListItemButton";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";
const ListItemButton = ({
selected = false,
...other
}: ListItemButtonProps) => {
const match = selected;
return (
<MuiListItemButton
{...other}
sx={{ color: match ? "primary.main" : undefined }}
/>
);
};
export default function SelectedListItem() {
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
index: number
) => {
setSelectedIndex(index);
};
return (
<Box sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
<List component="nav" aria-label="main mailbox folders">
<ListItemButton
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItemButton
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 3}
onClick={(event) => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItemButton>
</List>
</Box>
);
}
此方法唯一的缺点是目前比使用styled要快notably slower，但速度仍然足够快，可以满足大多数用例。
另一个选项是通过其css prop直接使用情感。这允许使用类似的DX(尽管使用主题不太方便)，但不会对性能造成任何影响。
/** @jsxImportSource @emotion/react */
import * as React from "react";
import Box from "@material-ui/core/Box";
import List from "@material-ui/core/List";
import MuiListItemButton, {
ListItemButtonProps
} from "@material-ui/core/ListItemButton";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";
import { css } from "@emotion/react";
import { useTheme } from "@material-ui/core/styles";
const ListItemButton = ({
selected = false,
...other
}: ListItemButtonProps) => {
const match = selected;
const theme = useTheme();
return (
<MuiListItemButton
{...other}
css={css({ color: match ? theme.palette.primary.main : undefined })}
/>
);
};
export default function SelectedListItem() {
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
index: number
) => {
setSelectedIndex(index);
};
return (
<Box sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
<List component="nav" aria-label="main mailbox folders">
<ListItemButton
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItemButton>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItemButton
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItemButton>
<ListItemButton
selected={selectedIndex === 3}
onClick={(event) => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItemButton>
</List>
</Box>
);
}
在我工作的应用程序中(我还没有开始迁移到v5)，我希望使用styled和情感的css函数/道具的组合。我在犹豫是否大量使用sx道具，直到它的性能提高一点(我认为这最终会发生)。尽管它执行得足够快，但在很多情况下，当我有两个类似DX的选项可用，并且其中一个的速度是另一个的两倍时，我发现很难选择速度较慢的那个。我选择sx道具的主要情况是希望为不同断点或类似区域设置不同的CSS属性的组件，其中sx道具提供的DX比其他选项好得多。
相关答案：
Is there a performance difference between the sx prop and the makeStyles function in Material UI? When migrating to Material-UI v5, how to deal with conditional classes?