尝试导入错误：“fade”未从“@material-ui/core/styles”导出

Question

尝试了我在互联网上找到的所有可能的解决方案。 我使用yarn升级了所有依赖项和包 - 下面来自package.json

"dependencies": {
  "@date-io/date-fns": "^1.3.13",
  "@date-io/moment": "^1.3.13",
  "@material-ui/core": "^5.0.0-beta.2",
  "@material-ui/icons": "^5.0.0-beta.1",
  "@material-ui/lab": "^5.0.0-alpha.41",
  "@material-ui/pickers": "^4.0.0-alpha.12",
  "@material-ui/styles": "^5.0.0-beta.2",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "axios": "^0.21.1",
  "date-fns": "^2.22.1",
  "moment": "^2.29.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router": "^5.2.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
}

在升级软件包之前，我使用了：

import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';

之后我导入了这些：

import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';

并尝试以下代码：

                <LocalizationProvider dateAdapter={AdapterDateFns}>
                    <Grid container justifyContent="space-around">
                        <DatePicker 
                            disableToolbar 
                            variant="inline" 
                            format="DD/MM/yyyy"  
                            margin="normal" 
                            label="Date" 
                            name="date"
                            value={values.date}
                            onChange={(date) => handleInputChange(convertToDefault(date))}
                        />
                    </Grid>
                </LocalizationProvider>

你能帮我吗？ 这很麻烦：/

Answer 1

使用这个版本对我来说很好...yarn add @material-ui/core@4.11.4 @material-ui/pickers

"@material-ui/core": "4.11.4",
"@material-ui/pickers": "^3.3.10",

Answer 2

- import { fade } from '@material-ui/core/styles';
+ import { alpha } from '@material-ui/core/styles';

const classes = makeStyles(theme => ({
-  backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+  backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
}));

Answer 3

嗨，我认为它不再是 @material-ui/pickers 的一部分。 您可以查看此https://github.com/mui-org/material-ui-pickers/issues/2157

Answer 4

对我来说，这些版本可以正常工作。 使用完全相同的版本，稍后感谢我。 如果它不允许您安装，请使用 --force 标志。

"@material-ui/core": "^4.11.4",
"@material-ui/pickers": "^3.3.10",

Answer 5

您不能再使用 material-ui 中的“淡入淡出”，因为它已被弃用。 您可以改用“alpha”。