如何导入不同名称的MUI组件？
在前端开发中，MUI（Mobile UI）是一个流行的前端框架，用于构建移动端应用程序。MUI组件库提供了各种可重用的UI组件，方便开发人员快速构建丰富的移动端界面。
要导入不同名称的MUI组件，需要按照以下步骤进行操作：
- 下载MUI组件库：首先，你需要从MUI官方网站（https://www.muicss.com）上下载MUI组件库的最新版本。
- 引入MUI CSS和JS文件：将下载的MUI组件库解压，并将
mui.css和mui.js文件复制到你的项目目录中。然后，在HTML文件的<head>标签中引入MUI CSS文件和JS文件，如下所示：
<head>
<link href="path/to/mui.css" rel="stylesheet" />
<script src="path/to/mui.js"></script>
</head>确保将path/to替换为实际的文件路径。
- 导入所需的MUI组件：MUI组件库提供了多个不同名称的组件，你可以根据需要选择并导入相应的组件。导入组件的方式有两种：
- a. 使用HTML标签导入：通过在HTML文件中使用MUI组件的HTML标签，可以直接导入该组件。例如，如果要导入MUI的按钮（Button）组件，可以使用以下代码：
- a. 使用HTML标签导入：通过在HTML文件中使用MUI组件的HTML标签，可以直接导入该组件。例如，如果要导入MUI的按钮（Button）组件，可以使用以下代码：
- 这样，一个样式为MUI风格的按钮就会被渲染出来。
- b. 使用JavaScript导入：如果你需要在JavaScript代码中动态地创建和操作MUI组件，可以使用MUI的JavaScript API。首先，在JavaScript代码中导入MUI模块，例如：
- b. 使用JavaScript导入：如果你需要在JavaScript代码中动态地创建和操作MUI组件，可以使用MUI的JavaScript API。首先，在JavaScript代码中导入MUI模块，例如：
- 接下来，你可以使用MUI提供的方法创建和操作不同的组件。
需要注意的是，具体导入不同名称的MUI组件的方法取决于你的具体需求和使用的前端框架，以上是一般情况下的导入方式。如果你使用的是Vue.js、React或Angular等前端框架，可能还需要额外的配置或使用相应的插件来导入MUI组件。
推荐的腾讯云相关产品：在腾讯云的云计算服务中，可以使用云服务器（CVM）来搭建前端开发环境和运行应用程序，使用云数据库（CDB）来存储和管理数据，使用云原生应用引擎（TKE）来管理和运行容器化应用，使用CDN加速（CDN）来提供快速的静态资源访问。具体产品详情请参考腾讯云官方网站（https://cloud.tencent.com）。
希望以上内容能对你有所帮助！
相关·内容
我使用的材料Ui版本5.2.7。当我从makeStyles导入@mui/materials/styles时，我会得到以下错误-
Uncaught Error: MUI: makeStyles is not longer exported from @mui/material/styles. You have to import it from @mui/styles. See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.
他还说，@mui/styles在梅版本5中是不推荐的，所以我很困惑如何导
浏览 35提问于2022-01-07得票数 10
回答已采纳
3回答
真正简短的问题是，如何以不同的名称从MUI导入Table，因为我的组件的名称是Table.js，并且存在冲突，因为导入MUI Table的方式如下所示： import Table from "@mui/material/Table"; 显然存在冲突，因为组件中有两个元素具有表标识符。 有没有办法用不同的名字导入Table？
浏览 37提问于2021-10-18得票数 1
回答已采纳
我有一个来自MUI的抽屉组件，我使用从styled导入的import { styled } from "@mui/material/styles";来设计它的样式。
如何将ListButton作为ListItem的目标
const ListButton = styled(ListItemButton)<StyledListItemButtonProps>(
({ theme }) => ({
padding: 14,
borderRadius: 8,
minHeight: 48,
justifyContent: "c
浏览 7提问于2022-11-03得票数 0
回答已采纳
3回答
我将MUI用于一个react项目，并且intellisense在速度方面给我带来了问题。建议在4到5秒内不会出现，我猜MUI的庞大库与它有关。是否有一种专门为MUI禁用intellisense的方法？如果没有，还有其他方法可以加快intellisense吗？
package.json
"dependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material":
浏览 4提问于2021-11-12得票数 6
我想在我的ReactJs项目中使用MUI图标，但是当我开始我的项目时，我有一个错误。 使用npm Install @mui/icons-material安装MUI...导入我的图标： import HomeIcon from '@mui/icons/material/Home'; 如何解决此错误？ ? 错误文本： Module not found: Can't resolve '@emotion/react' in '.../@mui/styled-engine'
浏览 84提问于2021-10-20得票数 1
回答已采纳
我正在尝试导出带样式的AppBar，这是我的代码 import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
imp
浏览 101提问于2021-10-13得票数 0
回答已采纳
在demo.js中，我想使用Card以及它的CardHeader，并将单词放在CardContent中。此外，我还将在其他文件中使用CardComponent。如何使CardComponent可重用？
样本代码：
下面是demo.js的代码
import * as React from "react";
import CardComponent from "./CardComponent";
export default function BasicCard() {
return (
<>
<h1>Hello&
浏览 3提问于2022-01-31得票数 0
回答已采纳
如您所知，导入MUI组件有两种方法。例如：
import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';
所以我的问题是:我应该用哪种方式？他们之间有什么不同吗？
浏览 5提问于2021-11-26得票数 1
回答已采纳
我在我的网站上使用了MUI。在玩devtools时，我看到了许多与MUI组件相关的类。
MUI的默认组件是否有CSS，比如菜单？我与MUI组件的布局缺乏组织。
有点像
import '@mui/dist/mui.css';
因为这不管用。
浏览 3提问于2022-05-27得票数 2
这是一个简单的例子，说明了这个问题。(切换到浅层测试并不是真正测试的选择)。但在materialui v4中并没有发生这种情况。(只在升级至梅v5后)
it('Test Drawer', () =>
{
enzyme.mount(<Drawer
open={true}
>
<div>hello world</div>
</Drawer>);
})
产生以下错误：
TypeError: Cannot read property 'scrollT
浏览 4提问于2021-10-22得票数 0
1回答
我正在用梅花和材料包的主题来建立一个项目。我正在使用由材料工具包提供的主题，我也使用自定义css来修改材料工具包提供的默认组件的一些特性，但是我不能过度使用这些样式。所以现在我被材料工具包提供的默认主题困住了，但最近我在我的应用程序中添加了另一个组件，我注意到每当我打开该组件时，应用程序的总体样式就会发生变化，令我感到惊讶的是我提供的自定义样式，它们以前不起作用。我的问题是-这种行为的原因可能是什么？
任何帮助都将不胜感激。
这是我的App.js
import './App.css';
// @mui material components
import { ThemePr
浏览 2提问于2022-03-23得票数 0
回答已采纳
2回答
获取多个此类错误，同时尝试使用mui中的日期选择器。
未找到模块:错误:无法解决“瞬间”
无法解析“@mui/x-日期选择器/本地化提供程序”
模块未找到:错误:无法解决‘../内部部件/钩子/useUtils’‘
还有更多。我做过npm install @mui/x-date-pickers
以下是用法：
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
name="deadline"
label="Deadline"
浏览 5提问于2022-05-21得票数 1
回答已采纳
1回答
我创建了一个组件DateTimePicker (可以是DatePicker)，我制作了youtube视频中推荐的所有安装，以及这个站点。经过一天半的尝试，我需要你的帮助。我去不了了。因此，下面遵循我的代码，如果您可以在一个分离的组件，以用于其他形式，我会欣赏。提前谢谢。
// Bancos component (means Banks)
// if I don't comment the lines commented bellow, the form does not render and breaks the app.
import React, { useState } f
浏览 6提问于2022-06-13得票数 0
我想要添加到我的应用程序中，并且我将第一个示例添加到我的应用程序中，但在我的控制台上出现了以下错误：“未捕获TypeError:无法读取未定义的属性'toUpperCase‘”
import React from 'react';
import Router from 'react-router';
import mui from 'material-ui';
var Link = Router.Link,
Paper = mui.Paper,
Stepper = mui.Stepper,
Step = mui.
浏览 0提问于2016-06-17得票数 0
在Material v5中，一些API使用是从@mui/material/styles导入的，比如useTheme。一些API使用是从@mui/styles导入的，比如makeStyles。我能否仅从一个库( @mui/styles或@mui/material/styles )中使用那些与样式相关的API？因为，在Material v4中，我从'@material-ui/core/styles'或'material-ui/styles'导入了所有与样式相关的API。
浏览 5提问于2021-10-09得票数 22
回答已采纳
1回答
导入"@mui/material"将阻塞VSCode -因此TS警告将在10-15秒之后出现，而不是小于10 TS，例如：
import { Button } from '@mui/material'
// and make a use with this button.
然后：
new Date(). // will show the autocomplion very slow
如果您删除该按钮的导入，或从此包中删除任何模块，则一切都将再次正常工作。
浏览 1提问于2021-11-06得票数 4
使用MUI 4.12，我已经将类型设置为黑暗，并使用了CssBaseline，这是我在其他答案中看到的解决方案，但它似乎完全被忽略了。
import {React, Fragment} from 'react'
import {
createTheme,
ThemeProvider,
makeStyles,
Zoom,
Fab,
useScrollTrigger,
Box,
CircularProgress
} from "@material-ui/core";
import CssBa
浏览 2提问于2021-10-30得票数 2
回答已采纳
显然，我对此感到非常困惑，但是，我有一个模块FileAttachments，它导入了相当数量的其他相当大的模块(其他人不这么做)。我希望当我用React.lazy (Reactive18)将该导入更改为动态导入时，webpack (5.72)会将该导入所需的代码分离到它自己的块中。但它并没有做任何类似的事情。我为什么这么困惑？我只设置了一个入口点，但我认为动态导入的点是我不需要这样分解它。
我把我的代码改为：
import {observer} from "mobx-react-lite"
import React, {useCallback, Suspense} from &
浏览 14提问于2022-04-23得票数 2
回答已采纳
1回答
我在反应上是新的，总体上是一个新的发展；
我知道有许多方法可以让元素自己做出反应：
导入CSS、本地作用域CSS模块、通过StyledComponents或like导入 CSS -in-JS、实用程序--首先使用诸如“编译”和"Linaria“、</code>H 113</code>内联stylingstyle对象变量<code>H 216</code><code>f 217</code>等库的导入CSS。
和两个当前用于样式MUI元素的API：
andSX风格的
当涉及到定制MUI组件时，很明显，最好使用这两种组
浏览 8提问于2022-04-04得票数 1
回答已采纳
你好吗？
我有一个使用Webpack和Babel的React项目，我试图添加Material ()组件，但是，当我将一个MUI组件导入到我的项目中时，我会得到下一个错误：
元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但是got: object。
--我找到的解决办法是添加".default"导入，但我不明白为什么不能以传统的方式导入它。
下面是生成错误的测试组件代码：
const React = require("react");
const Button = require("@mui/material/Button"
浏览 2提问于2022-03-12得票数 1
回答已采纳
我试图在SX中使用伪元素“：：use”的mui图标
这是我的代码：
import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
sx={{
"&.Mui-selected::before": {
content: '"ArrowLeftIcon"',
},
如何将ArrowLeftIcon添加到内容中
浏览 7提问于2022-09-15得票数 0
1回答
我是新来的材料用户界面，我不明白为什么我的Toggle看起来是那样.和
我没有任何编译问题，我的代码非常简单：
return (
<Grid container spacing={2}>
<Grid item xs={6}><Button variant="contained" >{exploitantLigne.raisonSociale}</Button></Grid>
<Grid item xs={3}></Grid>
<
浏览 2提问于2022-02-18得票数 0
目标:当断点在平板和以下时隐藏navMenu，所以我可以用汉堡包菜单代替
在VS代码的终端中，它说编译成功，但在浏览器中我看到：
TypeError:无法读取未定义的属性(读取'down')
我试过这里的说明：，没有运气。
有人能给我指明正确的方向吗？
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typogra
浏览 3提问于2021-11-13得票数 3
回答已采纳
我使用的是"mui-datatables": "^4.2.2", "@mui/material": "^5.6.1",，我试图像这样定制样式：
// MUI DATATABLES
import MUIDataTable from "mui-datatables";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { CacheProvider } from "@emotion/re
浏览 13提问于2022-04-14得票数 0
回答已采纳
我正在执行一个项目，其中im使用NSI创建一个安装程序myproject.exe，--一切正常，但我想转储显示在文件中的日志，这也很好，但我的问题是，我无法确定何时调用日志函数。
我的脚本中有12个部分，我获得了从创建安装日志的函数
!define PRODUCT_NAME "myApplication"
!define PRODUCT_VERSION "1.7.1"
!define LVM_GETITEMCOUNT 0x1004
!define LVM_GETITEMTEXT 0x102D
!include MUI2.nsh
Name
浏览 2提问于2012-01-07得票数 2
回答已采纳
1回答
当我运行我的MUI应用程序时，我在控制台中得到这个错误。
警告: forwardRef呈现函数完全接受两个参数: props和ref。您忘记使用ref参数了吗？
import { LoadingButton } from "@mui/lab";
const LoadData = ({loading,signinHandler}) => (
<LoadingButton loading={loading} variant="contained" sx={{ textTransform: "capitalize" }} onClic
浏览 15提问于2022-08-04得票数 0
回答已采纳
例如，引入的推荐方法是这样做：
import Button from 'react-bootstrap/Button'而不是import { Button } from 'react-bootstrap';
原因是“这样做只吸引了您使用的特定组件，这可以显著减少最终发送到客户端的代码数量。”
来源：
React组件也是如此：
import Button from '@mui/material/Button';
来源：
我想在库中实现类似的东西，以限制包中代码的使用，但我不知道它们是如何实现这个特定模式的。我看过他们的代码库，但我不太明白。
浏览 10提问于2022-07-10得票数 0
我有一个svg文件，我想在mui组件中使用，但是执行这个<Avatar src="./**.svg" />不会呈现(空白)。当这个<Avatar src="./**.png" />工作的时候。有解决办法吗？
浏览 23提问于2022-02-21得票数 0
1回答
我在玩样式部件，在材料用户界面的工作中遇到麻烦。这就是代码：
import React from "react";
import styled from "styled-components";
import ChatIcon from "@mui/icons-material/Chat";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { Avatar} from "@mui/material";
function Sidebar
浏览 1提问于2022-08-29得票数 0
如果选择了某个组件，我会提示用户提供额外的信息，但我不太确定如何检查给定的组件是否被选中。看起来可能有某种关联，但我的印象是，一个部分是一组组件……
在Anders的帮助下，我有了这个工作：
!include MUI.nsh
!include nsDialogs.nsh
!include LogicLib.nsh
!include sections.nsh
Name A
InstProgressFlags smooth colored
LicenseBkColor /windows
OutFile A.exe
InstallDir $PROGRAMFILES\A
Var Dialog
S
浏览 0提问于2013-02-22得票数 6
回答已采纳
我正在使用material构建一个可重用的共享组件库，它是在我的主要应用程序中导入的，如下所示：
import { theme, StepperComponent } from '@company/shared-components';
import { ThemeProvider } from '@mui/material/styles';
...
return (
<ThemeProvider theme={theme}>
<StepperComponent steps={stepperTitles} />
浏览 7提问于2021-09-06得票数 7
1回答
我已经把MUI从v4升级到了v5。然而，我现在很难理解主题如何与可用的不同主题解决方案一起工作。我真的不知道在哪里使用MUI主题/样式组件，以及何时使用情感组件。 在新的组件中，我使用sx属性来应用样式，但是我有相当多的组件仍然使用createStyles/useStyles函数。 我目前有以下设置： import {
ThemeProvider as MuiThemeProvider,
Theme,
StyledEngineProvider,
createTheme,
} from "@mui/material/styles";
import { Theme
浏览 15提问于2021-10-19得票数 2
回答已采纳
2回答
我有一个SearchBox组件。
SearchBox.tsx
import React from "react";
import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import Paper from "@mui/material/Paper";
import SearchIcon from "@mui/icons-material/Search";
functi
浏览 14提问于2022-06-26得票数 0
我想在图形的nodeComponent属性中创建一个自定义节点。我基本上希望它是MUI弹出组件，但是这里的html似乎是不允许的。我甚至不能让一个<h1>hello</h1>作为节点。我需要做什么才能在这里使用HTML或任何其他自定义组件？
谢谢!
浏览 10提问于2022-12-02得票数 0
我创建了一个标题菜单。它仍然工作在材料-UI V4。但我最近更新为资料用户界面V5。但是我有一个错误: TypeError:无法读取未定义(读'down')的属性
import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/system";
// NOTE: Styling header bar components
const useStyles = makeStyles((theme: Theme) => ({
title: {
浏览 4提问于2021-09-18得票数 3
1回答
我是个反应新手。假设有一个通知的钟形图标。一旦单击，将有一个最近收到的通知摘要，下面有一个按钮。单击该按钮时，我希望将最近的通知组件替换为包含过去通知的列表，而不需要转到不同的页面。如何在初始按钮上实现onClick处理程序？我应该使用react-router吗？
Notif.jsx (recent notifs)
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
imp
浏览 5提问于2022-03-10得票数 -1
我有一个自定义的MUI 5组件库NPM包，它导出一些用MUI 5构建的基本组件，导出主题文件，并将主题提供程序封装到可重用组件中，如下所示：
import { ThemeProvider } from 'styled-components';
import { StyledEngineProvider } from '@mui/material/styles';
import { theme as defaultTheme } from './theme';
function CustomThemeProvider(props: {
the
浏览 7提问于2022-01-13得票数 6
也许这只是一个基本的问题，但到目前为止还没有找到任何合理的解释。我最近刚开始使用react和MUI。我不太清楚什么时候使用Input还是Textfield来构建表单？
查看文档，感觉TextField是Input功能的超集，但不确定。MUI站点使用了TextField和Input的示例，但没有说明两者的优点和任何用例。
请提个建议。
浏览 1提问于2019-05-14得票数 40
回答已采纳
1回答
我有一个确认对话框。如果单击click按钮，对话框将出现，然后单击该对话框中的“取消”按钮，从而关闭该对话框。
现在，这个问题已经是第二次出现了，如果我单击click按钮，对话框就不会出现。
// App.js
import ConfirmationDialog from "./ConfirmationDialog";
import { useState } from "react";
export default function App() {
const [confirm, setConfirm] = useState(false);
const
浏览 6提问于2022-08-09得票数 0
回答已采纳
这是一个后续问题，关于MUI v5主题的问题.虽然我的问题得到了回答，但我仍然很难理解@emotion/react的确切位置以及应该在什么时候使用@mui/material/styles。我读给，虽然这确实回答了一些‘如何’的问题，但我不明白更大的情况。
我什么时候使用MUI的造型，什么时候情感的？为什么有两个造型解决方案？我应该使用MUI的ThemeProvider还是使用情感的？有什么不同吗？对于一个有经验的用户来说，这些问题可能是微不足道的，但作为刚刚起步的人，这一切都是需要理解和理解的。
浏览 3提问于2021-10-19得票数 12
回答已采纳
我已经创建了一个带有共享组件库的monorepo，但是当我从该库导入包含来自@ MUI /图标的mui图标的组件时，我会得到以下错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
这就是我在console.log()导入图标时得到的结果
import AddIcon from '@mui/icons-material/Save';
console
浏览 15提问于2022-04-26得票数 5
正如标题所说。两者都接受相同类型的ThemeOptions对象。 const theme = createMuiTheme({
palette: {
primary: {
main: "#006400"
},
secondary: {
main: "#ffa500"
}
}
}); const theme = createTheme({
palette: {
primary: {
main: "#006400"
},
secondary: {
浏览 58提问于2021-08-17得票数 7
回答已采纳
例如：
import { CssBaseline, ThemeProvider, Typography } from "@material-ui/core"; // MUI **Typography** component
import { Text, RichText } from "@some-library/core"; // some-library's **Text** component
const theme = createMuiTheme({
overrides: {
typography: {
h1: {
浏览 8提问于2020-08-25得票数 0
1回答
你好，我正面临这个错误，有人知道如何处理吗？错误不是识别反应中的属性：“位置”，“sx”。...............................................................................................................................................................................................................................................................
浏览 7提问于2022-02-03得票数 0
我使用的是资料UI库，并试图通过使用import语句导入SendIcon：
import { SendIcon } from "@mui/icons-material/Send.js";
我必须包括.js扩展，因为我在"type" : "module"文件中包含了package.json。
但是，我得到了错误：
export 'SendIcon' (imported as 'SendIcon') was not found in '@mui/icons-material/Send.js' (poss
浏览 14提问于2022-09-16得票数 1
我想用npm install @mui/material，但用的是角度。不知道这会不会奏效。我对角也很陌生。如果我们不能在角度上使用mui，是否有任何特定的角度库可用于提供材料UI？
浏览 4提问于2022-01-25得票数 0
回答已采纳
我尝试使用Qwik框架，它看起来非常像Reactjs，并且使用jsx。突然，我想知道像MUI这样的Reactjs库是否可以使用Qwik框架。
我试过这个代码：
import { component$ } from "@builder.io/qwik";
import Add from "@mui/icons-material/Add";
import IconButton from "@mui/material/IconButton";
const AddToCartButton = component$(() => {
return
浏览 13提问于2022-08-21得票数 3
1回答
为什么我的MUI按钮组件看起来像这样，而不是像文档一样，没有外部.css文件或主题更改，除了列出的文件之外，我还安装了roboto字体，并且处理我想要进行的任何更改都是全局的。
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from
浏览 2提问于2022-02-09得票数 0
在Material v4中，我可以在类似于这样的BottomNavigationAction中执行StyledBadge：
<BottomNavigationAction
id="0"
label="Appointments"
icon={(
<StyledBadge badgeContent={numberOfUnreadAPPTS.toString()} overlap="circular">
<ApptsIcon />
</S
浏览 7提问于2021-10-06得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
