标签: material-ui

我正在尝试使用 Material UI 表格分页每页显示 5 行，但它显示页面上的所有项目并且不会更改页面。无法找出我哪里出错了。我在沙箱中重新创建了我的问题，请您检查一下：https : //codesandbox.io/s/magical-davinci-t2nq7

 state = {
    rowsPerPage: 5,
    page: 0
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };


       <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        component="div"
        count={data.length}
        rowsPerPage={this.state.rowsPerPage}
        page={this.state.page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
      />

我试图从 material-ui 显示一个输入组件，但是当我写一些文本（比如 3 个字母）时，页面崩溃了。

import React from 'react';
import Input from '@material-ui/core/Input';

export default function ComposedTextField() {
  const [state, setState] = React.useState('');

  const handleChange = event => {
    setState((state) => event.target.value);
  };

  return (
    <Input id="component-simple" value={state} onChange={handleChange} />
  );
}

我注意到替换setState((state) => event.target.value);为setState(event.target.value);修复了这个问题，但我需要（在我的实际项目中）使用 setState 的完整版本。

有人明白为什么setState((state) => event.target.value);不起作用吗？

我使用 Material UI 选择创建了一个下拉菜单。它说“搜索”。当我们点击它时，它会给我们一个列表。当我选择其中一个选项时，我想存储该选项并将“搜索方式”更改为所选的选项。

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <div className='main-content'>
        <Select 
          value = {criteria}
          onChange={
            value => { setCriteria(value);}
          }
          displayEmpty
        >
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>
      </div>
    )
    </div>
  );
}

目前， onChange 给了我这个价值错误：

Argument of type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to parameter of type 'SetStateAction<string>'. …

假设我有一个主题文件：

主题.js：

import {createMuiTheme} from "@material-ui/core/styles";

export const myTheme = createMuiTheme({
    palette: {
        text: {
            color: "#545F66",
        },
    },
});

和 App.js 文件，其中渲染看起来像这样：

return (
        <MuiThemeProvider theme={myTheme}>
            <CssBaseline />
            <MyComponent />
        </MuiThemeProvider>
    );

现在我知道我可以通过 withStyles 访问主题：

const StyledMyComponent = withStyles(theme => ({
    something: {
        color: theme.palette.text.color
    }    
}))(props => <MyComponent {...props} />);

但我想要实现的是不同的东西。MyComponent 是一个非常大的组件，例如具有名为“react-table-1”的类，我想要的是将类颜色“react-table-1”设置为 theme.palette.text ，如下所示：

const StyledMyComponent = withStyles(theme => ({
    "react-table-1": {
        color: theme.palette.text
    }    
}))(props => <MyComponent {...props} />);

但显然它不起作用。有谁知道这是否可能？我怎样才能做到这一点。

我可以在 css 文件中设置“react-table-1”颜色，但我想通过按钮在 react 内部更改它，这就是为什么我需要这样的东西。

现场演示：https …

我正在尝试通过覆盖PaperComponent道具向 Material UI 自动完成纸添加一个按钮，并在纸的按钮处添加一个按钮，但单击该按钮会自动关闭自动完成搜索结果

如何防止自动完成搜索结果 Paper 在点击时关闭

这是一个沙箱：https : //codesandbox.io/s/material-demo-mxjyi

更新：我没有注意到沙箱没有保存，现在你可以看到问题了

在 my 中App，我们有基于角色的permissions喜欢ADD/DELETE。

• Admin拥有add, delete,edit的所有权限records
• customers没有delete权限。

因此，我想隐藏delete 复选框内的<Datagrid>客户。

//RoleList.js

import React from "react";
import { List, Datagrid, TextField, SingleFieldList, ChipField, EditButton, DeleteButton, ReferenceArrayField, Loading } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  chips: {
    backgroundColor: theme.palette.secondary.light
  }
}));

const RoleList = ({ permissions, ...props }) => {
  const classes = useStyles();

  if (!permissions) …

我正在我的 webApp 中实现自动完成材质 ui 小部件，但下拉菜单在我的编辑面板后面呈现。我可以使用箭头键选择选项，但看不到弹出窗口。如果我删除以下 css 属性 {position: "fixed"} 或 {"z-index": "2000"} 中的任何一个，它可以工作，但我的编辑面板将不再正确。因此，似乎我需要能够将下拉的 zindex 设置为 2001 或某些东西，但我不确定这是否是最佳解决方案或如何解决。

此外，我试图将下拉框的初始值设置为“ACCU-SEAL 35-532 Bag Sealer”，但出现以下错误：

Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".

所以我尝试将以下内容添加到我的自动完成中：

getOptionSelected={(option, value) => option.label === value}

但我得到了同样的错误。

我在这里有一个代码示例：https : //codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

我有一个包含KeyboardDatePickerfrom的表单，当没有值传递给该字段的钩子时material UI，我希望它有一个空字符串值 ( "") 作为默认值useForm。

到目前为止，这是我的实现：

日期选择器输入字段：

                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <Controller
                        name="date"
                        control={control}
                        rules={{ required: true }}
                        defaultValue={getValues().date || ""}
                        as={
                            <KeyboardDatePicker
                                autoOk
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                margin="normal"
                                id="date-picker-inline"
                                label="Date"
                                placeholder="yyyy-mm-dd"
                                required
                                error={!!errors.date}
                                helperText={errors.date && "Incorrect entry."}
                                onChange={() => {}}
                                value={() => {}}
                                KeyboardButtonProps={{
                                    "aria-label": "change date",
                                }}
                            />
                        }
                    />
                </MuiPickersUtilsProvider>

这是我对表单的钩子：

const { handleSubmit, getValues, control, register, errors, setValue } = useForm<Project>({
    submitFocusError: false,
    mode: "onBlur",
    defaultValues: project,
});

我正在使用 a projectbut project …

我试图将自动完成的初始值设置为“ACCU-SEAL 35-532 Bag Sealer”，但出现以下错误：

Material-UI：自动完成的 'getOptionLabel' 方法返回 undefined 而不是“ACCU-SEAL 35-532 Bag Sealer”的字符串。

所以我尝试将以下内容添加到我的自动完成中：

getOptionSelected={(option, value) => option.label === value}

但我得到了同样的错误。

我在这里有一个代码示例：https : //codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

任何设置自动完成初始值的帮助都会非常有用。

注意：我已经尝试过这个问题中提到的方法，但在我的情况下它们都不起作用。

这是我的分页组件的链接 - pagination.jsx

我希望将pagination具有响应行为的页面中心的组件对齐，我该如何实现？我正在使用material-ui和mdbootstrap两者。

预期产出