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

Question

我目前正在从 v4 迁移到 v5，但 @material-ui/core/styles/colorManipulator 似乎没有保留或访问方式不同。我试图在文档和迁移指南中找到有关它的信息，但没有看到任何信息。是否有替代方法可用于访问 darken() 等方法？我也在寻找从事物中获取样式的替代方法，即 v5 中的 import { styles as FabStyles } from "@material-ui/core/Fab/Fab";。我现在看不到访问各个样式。

Answer 1

darken、lighten、alpha 和 v4 中通过 @material-ui/core/styles/colorManipulator 访问的其他函数是 v5 中 @mui/material/styles 中的 exported。

虽然迁移指南没有明确提及，但至少某些情况由 preset-safe codemod (specifically the 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>
  );
}

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

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

Method replacements for material ui v4 to v5 upgrade

reactjs

material-ui

react-material