material-ui 相关问题

我有一个组件DataGrid MUI，我在其中使用editMode =“row” 我有一个组件DataGrid MUI，我在其中使用editMode =“row” <DataGrid rows = { rows } editMode = "row" rowModesModel = { rowModesModel } onRowModesModelChange = { handleRowModesModelChange } onRowEditStop = { handleRowEditStop } processRowUpdate = { processRowUpdate } /> 如何禁用键盘使用？为了确保 Material-UI DataGrid 组件中完全禁用键盘使用，包括通过键盘插入，我们可以调整实现以更全面地处理键盘事件。 import React from 'react'; import { DataGrid } from '@mui/x-data-grid'; const rows = [ { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, ]; const columns = [ { field: 'id', headerName: 'ID', width: 90 }, { field: 'firstName', headerName: 'First name', width: 150 }, { field: 'lastName', headerName: 'Last name', width: 150 }, { field: 'age', headerName: 'Age', type: 'number', width: 90 }, ]; function handleCellNavigation(event) { if (event.key.startsWith('Arrow')) { event.stopPropagation(); event.preventDefault(); } } function handleInsertion(event) { if (!event.metaKey && !event.ctrlKey) { event.stopPropagation(); event.preventDefault(); } } function App() { return ( <div> <DataGrid rows={rows} columns={columns} disableColumnMenu disableColumnSelector onKeyDown={handleCellNavigation} onKeyPress={handleInsertion} /> </div> ); } export default App;

material-ui datagrid

回答 1 投票 0

React Material UI 和 React hook 形成清晰按钮动态组件

我想编写一个自定义的 React TextField 组件，并且想向这个自定义组件添加一个清除按钮。我添加了该按钮，但其功能不起作用。我分享的电话和内容...

reactjs material-ui

回答 1 投票 0

我可以在没有 Mui 主题的情况下使用 Mui 组件吗

我有一个项目，我用 @emotion/styled 定义自己的主题。我想知道是否可以使用 Mui 组件之一，但无需使用 createTheme 从 Mui 定义主题。我想用 D...

reactjs material-ui material-react-table

回答 1 投票 0

如何自定义 Material UI 组件（例如删除 Select 组件上的蓝色轮廓）？

我刚刚开始开发 React 应用程序，并决定尝试使用 Material UI 的预构建组件。然而，我一直很难弄清楚如何正确定制组合...

javascript css reactjs material-ui

回答 2 投票 0

尝试将React程序从16升级到17

我正在使用一个较旧的React应用程序，该应用程序是由某人之前构建的，我被要求处理它。我想将其从 React 16.13.1 更新到 React 17，这样我就可以安装 Material UI v5 ...

reactjs npm material-ui react-16

回答 1 投票 0

Material UI Datagrid 复选框选择，服务器端分页清除 selectedModel。我想在更改页面时保留 selectedModel 状态

我正在使用 Material UI 的数据网格，并使用带有自定义分页组件的服务器端分页。当我选择同一页面上的复选框时，它工作正常，但随着页面的更改，我的选择模型...

checkbox material-ui pagination datagrid

回答 1 投票 0

NextJS - 在使用 Mui 的生产构建页面中<Container>抛出错误 500

我在整个页面上都使用 MUI，但其中一个页面似乎无法正常工作。在开发模式（下一个开发）上，一切正常，生产构建（下一个构建 + 下一个启动）第一个请求 URL

next.js material-ui mui-x

回答 1 投票 0

Material-UI DataGrid 未正确排序数字列

我目前正在使用 Material-UI 的 DataGrid 组件。可以显示数据，但内置排序未按预期工作。当我尝试对 ASC/DESC 进行排序时，它是根据第一个进行排序

reactjs sorting datagrid material-ui

回答 4 投票 0

使 MUI 按钮随着过渡而变宽

所以我们有这个自定义的ToggleButton，并且我们有一种情况，其中的文本会根据某些状态的变化而变化。问题是宽度的增长是突然的，如何轻松过渡？哈...

reactjs typescript material-ui css-transitions

回答 1 投票 0

MUIX DataGridPremium 的列自动调整大小属性在不使用 setTimeout 函数的情况下不起作用

我正在使用 DataGridPremium，我想自动设置网格列的宽度。尽管我曾经使用 autosizeOptions 属性网格列，但其内容并不适合。但是当我将代码包装起来时...

material-ui mui-x-data-grid mui-x

回答 1 投票 0

React + MUI 日期选择器，作为 iso 字符串控制，当字符串设置为空时，文本输入不会清除

使用 Mui DatePicker 并将值控制为字符串，如果我开始在文本字段中输入并将其保留为 01/MM/YYYY，然后单击外部清除按钮将受控值设置为 null，...

reactjs material-ui mui-x-date-picker

回答 1 投票 0

如何使用 mui 为可重复使用的 React 按钮应用不同的样式

就我而言，按钮是一个可重用的组件。它可以是绿色、白色文本或白色、绿色文本和边框。有更好的 mui 方法如何处理吗？页：就我而言，按钮是一个可重用的组件。它可以是绿色、白色文本或白色、绿色文本和边框。有更好的 mui 方法如何处理吗？页码： <MainButton title="Login" /> <MainButton title="Register" additionalStyles={{ // add other styles backgroundColor: "#e5f3fd", color: "#33b864", border: `1px solid ${theme.palette.secondary.main}`, "&:hover": { backgroundColor: "rgba(46, 171, 92, 0.1)", }, }} /> 主按钮： export const MainButton = ({ title, additionalStyles }: MainButtonProps) => { const theme = useTheme(); return ( <Button sx={{ height: 40, bgcolor: theme.palette.secondary.main, color: "#ffffff", textTransform: "none", fontSize: 15, fontWeight: 600, borderRadius: 2, "&:hover": { bgcolor: "#2eab5c", }, ...additionalStyles, }} > {title} </Button> ); }; 目前看起来是一个不错的方法，因为它允许灵活性和可扩展性，以防您将来想使用 extraStyles 属性添加更多样式。如果您知道自己只会有这两种变体，那么您可能希望将这些样式烘焙到组件中，并让它们在道具上切换。下面是一个例子，但这不一定更好，只是另一种方法。 export const MainButton = ({ title, variant }: MainButtonProps) => { const theme = useTheme(); const defaultStyles = { height: 40, textTransform: "none", fontSize: 15, fontWeight: 600, borderRadius: 2, }; const primaryStyles = { bgcolor: theme.palette.secondary.main, color: "#ffffff", "&:hover": { bgcolor: "#2eab5c", }, }; const secondaryStyles = { backgroundColor: "#e5f3fd", color: "#33b864", border: `1px solid ${theme.palette.secondary.main}`, "&:hover": { backgroundColor: "rgba(46, 171, 92, 0.1)", }, }; const styles = variant === 'secondary' ? { ...defaultStyles, ...secondaryStyles } : { ...defaultStyles, ...primaryStyles }; return ( <Button sx={styles}> {title} </Button> ); }; 然后将使用变体属性来调用： <MainButton title="Login" /> <MainButton title="Register" variant="secondary" /> 这更清楚地表明存在两个明确定义的变体。

reactjs material-ui styled-components

回答 1 投票 0

未捕获的类型错误：onPageChange 不是 Material UI 中 DataGrid 的函数

我正在尝试将 DataGrid 添加到我的应用程序中。下面的代码表渲染得很好，但是单击下一页图标时，我收到错误-react-dom.development.js:327 Uncaught TypeError: onPageCha...

javascript reactjs material-ui

回答 3 投票 0

ReactJs：找不到 Material TreeView 展开图标的加号方形图标

我正在努力寻找一些可能非常简单的东西，并且应该是许多人的要求，但我仍然没有在互联网上找到任何帮助我正在使用

reactjs material-ui treeview

回答 1 投票 0

自动对焦在 Material UI v5 中带有按钮组件的打开表单对话框中不起作用

有人知道为什么 TextField 中的自动对焦无法在带有按钮组件的打开对话框表单中工作吗？有人知道为什么 TextField 中的自动对焦无法在带有按钮组件的打开对话框表单中工作吗？ <TextField autoFocus margin="dense" id="name" label="Email Address" type="email" fullWidth variant="standard" /> 参见这里，它正在工作！参见这里，它不起作用！但是如果您使用组件链接，它就可以工作！请参阅这里！看看这个：https://github.com/mui/material-ui/issues/33004#issuecomment-1455260156。将 disableRestoreFocus 添加到 <Dialog> 对我有用！这是一个例子。对话框应该有 disableRestoreFocus 属性。对话框中的文本字段应具有 autoFocus 属性。 <Dialog disableRestoreFocus {...otherProps}> ... <TextField autoFocus {...otherProps}/> </Dialog>

reactjs material-ui

回答 1 投票 0

material-ui 相关问题

最新问题