material-ui 相关问题

实施Google Material Design的React组件。 http://material-ui.com

MUI 中的 sx 样式是否会对 SEO 产生不良影响，即使我正在使用使用 SSR 渲染页面的 nextjs 12 应用程序

我有一个 NextJs v12.3.0 应用程序，它在 MUI 中使用 sx 作为我的许多组件的样式。我的许多页面都呈现为 SSR。现在我想知道一些事情。 MUI 是否将 sx 样式渲染为内联 css？如果你...

reactjs performance next.js material-ui seo

回答 1 投票 0

Material UI TextField type='search'：如何替换/修改'clear'图标？

在下面的示例中，我使用 type='search' 的文本字段。 “清除”图标会自动出现。如何更改此图标的样式或将其替换为我自己的图标？导入搜索我...

reactjs material-ui

回答 3 投票 0

Antd select 无法在全屏对话框中工作

我在我的React应用程序中使用materialui和antd作为ui组件库。我一直在使用material ui的全屏对话框并尝试在对话框中插入antd的select。但看起来我...

reactjs material-ui antd

回答 3 投票 0

mui 使用入口点插入作用域影子 DOM 样式时选择未设置样式的下拉选项

请注意，这是针对 MUI v5 @mui/material 的，而不是使用 v4 @material-ui/core 最终弄清楚如何在使用情感入口点插入范围时显示 @mui/material 样式...

reactjs material-ui custom-element react-typescript

回答 2 投票 0

主题不适用于 next.js 应用程序中的我的组件

我正在next.js 中做一个应用程序。应用程序的登陆页面位于 LandingContent.tsx 中，主题不适用于该组件，而是适用于其中的其余内容。我为每个基本主题应用了主题...

reactjs typescript next.js material-ui

回答 1 投票 0

无法使用材质UI图标。说找不到模块

这是一个简单的程序。我正在尝试使用材质 UI 搜索图标。我已经安装了 Material UI 核心和 Material UI 图标。我仍然无法使用它们。有人可以解释一下为什么吗？导入

reactjs material-ui icons

回答 0 投票 0

我可以用MUI v6和pigment-css传递sx props吗？

我目前正在将团队的 Next.Js + MUI 应用程序迁移到 MUI v6。在这样做时，我在尝试运行开发服务器时遇到了此错误： ⨯ unhandledRejection：语法错误：path/to/my/Component.ts...

reactjs next.js material-ui next.js15 sx

回答 1 投票 0

选择，具有收缩属性的 OutlineInput 标签与空时的 TextField 不同

如果我使用 TextField 组件，并设置 InputLabelProps={{shrink: true}}，则 Label 会保留在 TextField 的顶部，并且轮廓会被剪切以正确显示 Label。但是，如果我使用 Select

reactjs material-ui

回答 4 投票 0

自定义角度组件未渲染

我正在尝试创建一个基于材质角度的自定义可重用组件我有以下代码 dropdown.component.ts 从“@angular/material/select”导入{MatSelectModule}；导入{

angular typescript material-ui material-design

回答 1 投票 0

多选标签被输入字段的轮廓划掉

我用 Material-UI 制作了一个多选列表。但是，当我选择一个项目时，标签应该缩小并适合输入字段的轮廓。问题是轮廓和标签保持不变

reactjs material-ui

回答 3 投票 0

如何使所有骨架元素在宽度方面响应？

我正在努力让我的代码中的 MUI 骨骼具有响应能力。虽然容器有响应，但骨架没有正确适应。有人可以帮助我排除故障并改进我的代码吗...

html css reactjs react-native material-ui

回答 1 投票 0

在 MUI 多选下拉列表的 renderValue 中显示选项的名称而不是 ID

我正在使用 MUI 多选下拉列表，并且正在努力获取 renderValue 来填充所选选项名称的逗号分隔列表。 MUI 网站的示例结束了

reactjs typescript material-ui

回答 1 投票 0

如何在 Material UI 快速拨号按钮中添加文本？

如何更改材质ui快速拨号按钮，显然它使用Fab默认值，你所能做的就是更改图标，但我还需要添加文本，例如：如何更改材质ui快速拨号按钮，显然它使用Fab默认值，你所能做的就是更改图标，但我还需要添加文本，例如： <Fab variant="extended"> <NavigationIcon /> Actions </Fab> 抱歉来晚了，但我最近遇到了这个问题并找到了解决方案： SpeedDial 附带 FabProps 属性，使您能够修改 Fab（Fab 文档：https://mui.com/material-ui/api/fab/）。因此，首先您应该修改 Fab 以使用 variant="extended"。然后要添加文本，请使用 icon 中的 SpeedDialIcon 属性。所以你的组件应该看起来像这样： <SpeedDial FabProps={{ variant: "extended" }} icon={ <SpeedDialIcon icon={ <Box sx={{ display: "flex" }}> <YourIcon /> <Typography> {/* Your text */} </Typography> </Box> /> } /> 为此目的使用 SpeedDialAction <SpeedDialAction key={action.name} icon={action.icon} // here goes your icon tooltipTitle={action.name} // here goes your text tooltipOpen onClick={handleClose} /> 将鼠标悬停时您会看到文档实例或使用浮动操作按钮达到您的目的 <Fab aria-label={fab.label} className={fab.className} color={fab.color} > {fab.icon} </Fab> 它的文档实例请告诉我它是否适合您）我最近也遇到了类似的问题。虽然设计人员可以轻松地在 Figma 或 w/e 中移动组件，但您依赖于 MUI 实现。在这种情况下，您需要操纵 MuiSpeedDial-root、MuiSpeedDial-actions 和 MuiButtonBase-root 以获得所需的结果。所以对于我的情况来说，它看起来像这样： const actions = [ { icon: ( <Box display="flex" gap={1}> <Typography fontSize={14}>{t('dashboard.selectDate')}</Typography> <EventIcon /> </Box> ), name: t('dashboard.selectDate'), onClick: () => { handleOpenDateModal(); handleClose(); } }, { icon: ( <Box display="flex" gap={1}> <Typography fontSize={14}>{t('dashboard.today')}</Typography> <CalendarTodayIcon /> </Box> ), name: t('dashboard.today'), onClick: () => { handleSetMonth(getTodayIso()); handleClose(); } }, { icon: ( <Box display="flex" gap={1}> <Typography fontSize={14}>{t('dashboard.navigation.uploadInvoice')}</Typography> <UploadFileIcon /> </Box> ), name: t('dashboard.navigation.uploadInvoice'), onClick: () => navigate(`/${ROUTING.INVOICE_UPLOAD}`) } ]; ... <StyledSpeedDial ariaLabel="SpeedDial controlled" icon={<SpeedDialIcon />} onClose={handleClose} onOpen={handleOpen} open={open} > {actions.map((action) => ( <SpeedDialAction TooltipClasses={{ tooltip: 'speed-action-tooltip-hide' }} key={action.name} icon={action.icon} tooltipTitle={action.name} onClick={action.onClick} /> ))} </StyledSpeedDial> 样式组件保存在单独的文件中： export const StyledSpeedDial = styled(SpeedDial)<SpeedDialProps>(({ theme }) => ({ position: 'absolute', bottom: 20, right: 16, zIndex: 2500, alignItems: 'end', '& .MuiSpeedDial-actions': { marginLeft: '-50px', '& .MuiButtonBase-root': { color: theme.colors.contrast, height: '40px', width: 'fit-content', alignSelf: 'flex-end', padding: '8px 16px', borderRadius: '100px', marginRight: 0, '& .MuiBox-root': { alignItems: 'center' } } } })); 不要在那些负利润上对我踢得太狠。这对我有用。我必须以这种方式覆盖高度和宽度，因为这是适应该文本的最方便的方法。我没有找到更优雅的方法，如果你找到了，请告诉我。附：这就是它的样子

button material-ui frontend customization speed-dial

回答 3 投票 0

我可以根据现有故事制作一个包含物体道具的新故事吗？

我一直在摆弄故事书，发现了这个新的很酷的功能，可以在摆弄当前的故事时添加新故事：交互式故事生成我尝试...

reactjs material-ui jsx storybook

回答 1 投票 0

如何使用MUI设置DatePicker的样式？在打字稿中

我刚开始使用 MUI 和 DatePicker 我试图更改代码中选定日期的颜色，但对我不起作用这是我的代码：我刚开始使用 MUI 和 DatePicker 我试图更改代码中选定日期的颜色，但对我来说没有任何作用这是我的代码： <DatePicker slotProps={{ textField: { size: isDesktop ? "medium" : "small", variant: "standard", }, }} sx={{ flex: 1, fontSize: ".875rem !important", "& input::placeholder": { fontSize: ".875rem !important", }, ".MuiOutlinedInput-root": { fontSize: ".875rem !important", }, "& .MuiPickersDay-root": { color: "white", "&:hover": { backgroundColor: "rgba(0, 128, 255, 0.2)", color: "blue", }, "&.Mui-selected": { backgroundColor: "rgba(0, 128, 255, 0.3) !important", color: "white !important", "&:hover": { backgroundColor: "rgba(0, 128, 255, 0.4) !important", }, }, }, }} value={startShowDate} format="dd/MM/yyyy" onChange={(newValue) => startDateHandle(newValue)} /> <DatePicker slotProps={{ textField: { size: isDesktop ? "medium" : "small", variant: "standard", }, }} sx={{ flex: 1, fontSize: ".875rem !important", "& input::placeholder": { fontSize: ".875rem !important", }, ".MuiOutlinedInput-root": { fontSize: ".875rem !important", }, "& .MuiPickersDay-root": { color: "white", "&:hover": { backgroundColor: "rgba(0, 128, 255, 0.2)", color: "blue", }, "&.Mui-selected": { backgroundColor: "rgba(0, 128, 255, 0.3) !important", color: "red !important", "&:hover": { backgroundColor: "rgba(0, 128, 255, 0.4) !important", }, }, }, }} value={endShowDate} format="dd/MM/yyyy" onChange={(newValue) => endDateHandle(newValue)} /> 注意到我阅读了文档并尝试了Props但仍然无法与我合作所以想法是改变所选日期的颜色任何帮助将不胜感激！诚然，文档在这方面非常稀疏，但您希望针对“纸质”插槽 - 由于您同时处理桌面/移动设备，因此您可能希望对 desktopPaper 和 mobilePaper 都执行此操作： <DatePicker slotProps={{ textField: { size: "medium", variant: "standard", }, desktopPaper: { sx: { "& .MuiDateCalendar-root": { backgroundColor: "white", "& [class$='MuiPickersDay-root'].Mui-selected": { backgroundColor: "rgba(0, 128, 255, 0.3) !important", color: "white", }, }, }, }, }} sx={{}} value={startShowDate} format="dd/MM/yyyy" onChange={(newValue) => startDateHandle(newValue)} /> 您也可能会幸运地直接在您的主题中执行此操作： const theme = createTheme({ components: { MuiDatePicker: { defaultProps: { displayWeekNumber: true, }, }, MuiDateCalendar: { styleOverrides: { root: { backgroundColor: "#f0f0f0", }, }, }, }, }); // ... <ThemeProvider theme={theme}> <YourApp /> </ThemeProvider>

typescript material-ui datepicker

回答 1 投票 0

在 Compose 中让 PopUpMenu 出现在键盘后面？

我目前正在 Android 应用程序中开发下拉菜单。它工作得很好，但是，键盘总是位于弹出菜单后面，我希望键盘将其覆盖。当我说 PopUpMenu 时，我是

android material-ui android-jetpack-compose popup

回答 1 投票 0

在ReactJS MUI DataGrid组件中通过useState创建列使其无法使用

我创建了一个 DataGrid 组件，就像 https://mui.com/x/react-data-grid/editing 中的示例一样。创建列后不使用 let 而是使用 useState 代替，如下所示：功能浏览器({

javascript reactjs material-ui datagrid

回答 1 投票 0

Material UI：使用swr时DataGrid服务器端分页数据闪烁

我想在 Material UI DataGrid 上显示服务器端分页数据，并使用 swr 获取数据。我一直在研究 DataGrid 中服务器端数据的 MUI 介绍示例，这就是我们......