Material ui v4 到 v5 升级的方法替换

Question

我目前正在从 v4 迁移到 v5，但它似乎@material-ui/core/styles/colorManipulator没有被继承或者可以以不同的方式访问。我尝试在文档和迁移指南中查找有关它的信息，但没有看到任何内容。是否有其他方法可以用来访问诸如 之类的方法darken()？我也在寻找从import { styles as FabStyles } from "@material-ui/core/Fab/Fab";v5 中获取样式的替代方法。我现在无法访问个人风格。

Answer 1

darken、lighten、 、 以及通过v4 中alpha访问的其他函数从v5 中导出。@material-ui/core/styles/colorManipulator@mui/material/styles

尽管迁移指南没有明确提及，但至少某些情况是由预设安全的 codemod（特别是core-styles-import codemod）处理的。

darken以下是v5 中的用法示例：

import { darken } from "@mui/material/styles";

export default function App() {
  return (
    <div>
      <h1 style={{ color: "#f00" }}>#f00</h1>
      <h1 style={{ color: darken("#f00", 0.25) }}>darken("#f00", 0.25)</h1>
    </div>
  );
}

至于问题的最后部分，每个组件的样式不再单独导出，并且不能独立于组件使用。