相关疑难解决方法(0)

根据 MUI 自己的 doco 和这个答案- 使用sx渲染的组件比使用其他样式机制的组件慢得多。

从表面上看，它看起来sx只是一个替代的便利 API，用于执行相同的操作 - 所以我不希望它具有如此不同的性能配置文件。

我的问题是：为什么组件的渲染速度sx如此之慢 - 它的作用有何不同？它是一个完全不同的造型引擎还是什么？

我很好奇优化它的可能性，或者提出一种折衷方案，保留大部分可用性，但忽略导致速度减慢的任何功能。

请注意，这个问题是关于“为什么性能如此不同”，而不是“为什么你认为差异不重要”。

我正在使用 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 …

我已将 MUI 从 v4 升级到 v5。但是，我现在很难理解主题如何与可用的不同主题解决方案一起使用。我不太明白在哪里使用 MUI 主题/样式组件以及何时使用情感组件。

在新组件中，我使用sxprop 来应用样式，但是我有很多组件仍在使用createStyles/useStyles函数。

我目前有以下设置：

import {
  ThemeProvider as MuiThemeProvider,
  Theme,
  StyledEngineProvider,
  createTheme,
} from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";

declare module "@mui/material/styles" {
  interface Theme {
    mycompany: {
      primary: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    mycompany: {
      primary: string;
    };
  }
}

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

const theme = createTheme({
  mycompany: …