在 Material-UI 中使用条件样式和 styled 与 JSS

Question

我正在使用 Material-UI v5 并尝试迁移到 usingstyled而不是，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>
    );
};

那么，关于这个的两个问题：

1. 这是执行条件样式的最佳方法吗？

2. 另一个问题是我无法计算出声明的正确类型-由于其类型的声明方式，styled我必须将// @ts-ignore注释放在上面。LinkItem

Answer 1

Material-UI v5 使用 Emotion 作为默认样式引擎，并styled在内部一致使用，以便让想要使用样式组件而不是 Emotion 的人更容易，而不必将两者都包含在捆绑包中。

尽管该styledAPI 在很多用例中都能正常工作，但对于这个特定的用例来说，它似乎不太适合。有两个主要选项可以提供更好的 DX。

一种选择是使用所有 Material-UI 组件上可用的新sx 属性（并且Box 组件可用于包装非 MUI 组件以访问sx功能）。下面是演示此方法的列表演示之一的修改（使用自定义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，但它仍然足够快，足以满足大多数用例。

另一种选择是直接通过其css prop使用 Emotion 。这允许类似的 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），我希望结合使用styledEmotion 的css函数/属性。我不太愿意大量使用该sx道具，直到它的性能有所改善（我认为这最终会发生）。尽管它在许多情况下执行“足够快”，但当我有两个具有类似 DX 的选项且其中一个的速度是另一个的两倍时，我发现很难选择较慢的一个。我选择sxprop 的主要情况是，我想为不同的断点或类似区域设置不同的 CSS 属性，其中sxprop 提供比其他选项更好的 DX。

相关回答：

• Material UI 中的 sx prop 和 makeStyles 函数之间是否存在性能差异？
• 迁移到Material-UI v5时，如何处理条件类？