时间戳

首页 > 解决方案 > Material-UI 导入顺序更改样式

javascript - Material-UI 导入顺序更改样式

问题描述

我正在学习 MUI，但在调试 CSS 问题时遇到了困难。基本上，在将 a 导出到自己的组件后，我的样式会中断。经过大量的试验和错误，我发现我的进口是罪魁祸首......

我第一次有这个：

import {
Avatar,
CardContent,
CardHeader,
CssBaseline,
IconButton,
Typography,
} from "@material-ui/core";
import Card from "@material-ui/core/Card";

这不起作用，但将导入更改为此修复了它：

import {
Card,
Avatar,
CardContent,
CardHeader,
CssBaseline,
IconButton,
Typography,
} from "@material-ui/core";

有人可以帮我理解为什么会发生这种情况，这是预期的行为吗？

标签： javascriptreactjsmaterial-ui

解决方案

您不能将 anamed import与 a 组合default import用于同一个库。

Anamed import是带括号的导入：

import {
Avatar,
CardContent,
CardHeader,
CssBaseline,
IconButton,
Typography,
} from "@material-ui/core";

Adefault import是不带括号的导入：

import Card from "@material-ui/core/Card";

所以你必须做出决定。如果你想使用 anamed import你应该使用你当前的解决方案：

import {
Card,
Avatar,
CardContent,
CardHeader,
CssBaseline,
IconButton,
Typography,
} from "@material-ui/core";

如果你想使用 adefault import你应该写：

import Card from "@material-ui/core/Card";
import Avatar from "@material-ui/core/Avatar";
import CardContent from "@material-ui/core/CardContent";
...

推荐阅读