标签: material-ui

MUI 有一个滑块组件：https ://mui.com/material-ui/react-slider/

我正在尝试找出如何禁用在小块上播放的动画以将其移动到新位置，以便它立即移动。有什么办法可以做到这一点吗？

我正在使用 Material-ui 中的 DataGrid，它为我提供了一个带有分页和过滤器的数组

 <DataGrid
        rows={OffersFilteredData}
        getRowId={(row) => row?._id}
        sx={{
          boxShadow: 5,
          border: 2,
          borderColor: '#fff',
          '& .MuiDataGrid-cell:hover': {
            color: 'primary.main',
          },
        }}
        columns={columns}
        checkboxSelection
        selectionModel={offersChecked?.map((obj) => Object.values(obj)[0])}
        onSelectionModelChange={(ids) => {
          onRowsSelectionHandler(ids);
        }}
        rowsPerPageOptions={[5, 10, 20, 50, 100]}
      />

我想更改分页中的标签值，但保留 DataGrid。

我已经看到了制作外部 TablePagination 组件的可能性，但我想保留 Datagrid 而不是单独制作组件。我可以添加到数据网格来更改标签吗？

我正在尝试使用过滤器方法从数组中删除一个项目，如下所示：

removeDisplate: (state, action: PayloadAction<string>) => {
  console.log(action.payload);
  state.map((item) => {
    console.log(item.name);
  });
  state.filter((item) => item.name !== action.payload);
},

并从我的前端调用它，如下所示：

{cart.map((displate, index) => {
  return (
    <Card
      sx={{
        minHeight: "150px",
        display: "flex",
        padding: "10px",
        gap: "10px",
        backgroundColor: "black",
        margin: "10px",
        position: "relative",
      }}
      key={index}
    >
      <CloseIcon
        sx={{
          position: "absolute",
          top: "10px",
          right: "10px",
          color: "red",
          cursor: "pointer",
        }}
        onClick={() => handleRemoveDisplate(displate.name)}
      />
    </Card>
  );
})}

状态中的有效负载和项目名称都与控制台日志相同，但它仍然没有从数组中删除它，有什么想法吗？

`<Tooltip
        placement="left"
        classes={{
          tooltip: "classes.customTooltip",
          arrow: "classes.customArrow",
        }}
        title="Reverse POS Update"
        arrow
      >
        <IconButton aria-label="edit" onClick={() => handleEdit(params.id)}>
          <SyncAltRoundedIcon className="reversebtn" />
        </IconButton>
      </Tooltip>`    

我正在使用 Datagrid，在我使用的列之一中使用图标而不是按钮，我在悬停时应用了 mui 工具提示，我的图标是红色的，我也希望我的工具提示是红色的。

{ field: "TickToDelete", headerName: "Delete", width: 70, sortable: true, renderCell: (params) => { return ( <Tooltip title="Delete" placement="right"> <IconButton aria-label="edit" onClick={() => handleEdit(params.id)}> <DeleteIcon /> </IconButton> </Tooltip> ); }, },

我在对话框中有 TextField，每次打开对话框时我都想聚焦它。我尝试使用inputRef回调，但 TextField 没有获得焦点。将 prop添加autoFocus到 TextField 也没有帮助。

最小的例子：

import { Button, Dialog, DialogContent, TextField } from "@mui/material";
import { useState } from "react";

function ExampleDialog(props: { isOpen: boolean; onClose: () => void }) {
  return (
    <Dialog open={props.isOpen} onClose={props.onClose}>
      <DialogContent>
        <TextField inputRef={(input) => input && input.focus()} fullWidth />
      </DialogContent>
    </Dialog>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button
        variant="contained"
        color="success"
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open dialog
      </Button>

      <ExampleDialog …

到目前为止，我一直在使用带有bootstrap-material的react-bootstrap。但是，我更喜欢API，以及只使用material-ui的整体简单性。但是，我目前正在开发一个高度依赖表单的应用程序，我想知道是否有一种制作水平字体的方法，例如bootstrap-material。

提前致谢。

我按照此链接中的步骤通过更改主题更改背景颜色材料-ui - > 日期选择器对话框.更改主题改变了背景颜色,但它没有改变OK和CANCEL按钮的颜色.如何改变OK和CANCEL按钮的颜色？

如何在React.js的 Material UI中更改DialogTitle和DialogContent中的字体/文本颜色

更改Dialog的背景颜色可以，但是尝试更改Dialog和DialogContent的字体颜色不起作用。

<Dialog
    open={this.state.open}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
    PaperProps={{
       style: {
           backgroundColor: "#fff",
       },
    }}
    >

    <DialogTitle id="alert-dialog-title">
         "Use Google's location service?"
    </DialogTitle>

    <DialogContent>
         <DialogContentText id="alert-dialog-description">
              Hello 
         </DialogContentText>
    </DialogContent>

    <DialogActions>
         <Button onClick={this.handleClose} color="primary">
                OK
         </Button>
    </DialogActions>
</Dialog>

上一个Material UI版本0.x具有Typescript的npm类型.它是

"@types/material-ui": "0.21.5"

但似乎没有可用的打字"@material-ui/core": "3.0.1".

那是对的吗？

我有一个Material UI TextField组件，该组件需要一些颜色自定义：

• error
• focused

我正在使用@ material-ui / core 3.8.1 及其<TextField />组件。

我想避免不得不使用 <MuiThemeProvider>

这是我根据此处针对Material-UI <Input />组件的建议以及此处的答案进行的尝试

复制：https : //codesandbox.io/s/q9yj0y74z6