标签: material-ui

我最近开始使用 Material Design React，但我刚刚发现 data-someField 确实将值传播到数据集映射。

例子：

<Input data-role=‘someValue’  onChange={this.onChange} />

onChange = e =>{
           const role = e.target.dataset.role
            const role2 = e.currentTarget.dataset.role
}

onChange 处理程序中的两个角色都未定义。如果我将 Input 标签更改为常规 html 输入，则不会发生这种情况。

任何想法为什么 Material Design 不允许数据属性或是否有任何解决方法？

先感谢您！

--- 在@Springer 建议之后，我尝试使用 inputprops，但注意到只有 name 属性可用，其余的未定义。

```  <Input
                    value={role.name}
                    disabled={!this.state.editMode}
                    inputProps={{
                      name: 'MyName',
                      role: 'MyRole',

                      dataset: {
                        degree: 'Teniente'
                      },

                      data: {
                        roleId: role.uuid
                      },
                      dataRoleId: {
                        roleId: role.uuid
                      }
                    }}
                    disableUnderline={true}
                    data-role-id={role.uuid}
                    role={role}
                    onChange={this.onChangeExistingRole}
                  /> ```

我试图在选择时更改行文本的颜色和行的背景颜色。

我能够成功更改背景颜色，但无法更改文本颜色。

<TableRow
        className={classes.tableBody}
      >

tableBody: {
    "&:focus": {
      color: "yellow !important",
      backgroundColor: "#3D85D2 !important",
    },
  },

我正在尝试将我的一些 React 组件从 Material UI迁移到新的makeStyles/ useStyleshook API。如果我理解正确classes，只要我将道具传递给，我就可以继续接受来自父组件的道具useStyles：

const MyComponent = (props: Props) => {
  const { myProp } = props;
  const classes = useStyles(props);

我想知道Props在这种情况下如何声明我的类型。HOC API 的等价物是：

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends WithStyles<typeof styles> {
  myProp: string;
}

这是一些有效但看起来有点冗长的东西：

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends StyledComponentProps<ClassKeyOfStyles<typeof styles>> {
  myProp: string;
}

const useStyles = makeStyles(styles);

有没有更好的办法？理想情况下，不需要createStyles和使用 …

所以我对 node.js / react / material-ui 还很陌生。我一直在按照指南尝试建立一个网站，并且进展顺利。我决定为时髦的组件（不是指南的一部分）包含 material-ui，然后卡住了，因为在使用主题 ui 时我似乎无法触发自定义函数。

使用下面的代码，如果我放弃“类”道具，我可以创建一切正常。我可以添加我的功能，一切正常。但如果我这样做，我显然会失去所有的造型。

const styles = theme => ({
    // Styling - omitted
});

const Login = (props) => {

    const {classes} = props;

    return(
        <div>
            <Paper className={classes.root}>
                <form className={classes.container} noValidate autoComplete="off">
                    <TextField
                        id="email"
                        label="Email"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="email"
                        name="email"
                        autoComplete="email"
                        margin="normal"
                        variant="outlined"
                        required
                        autoFocus
                    />
                    <TextField
                        id="outlined"
                        label="Password"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="password"
                        autoComplete="current-password"
                        margin="normal"
                        variant="outlined"
                        required
                    />
                    <Typography className={classes.divider} />
                    <Button
                        type="submit"
                        variant="contained"
                        color="inherit"
                        className={classes.button}
                    >
                        Login …

我尝试使用 react-hook-form 来验证输入。但是我发现如果输入被放置在 Material UI 的对话框组件中，react-hook-formsetValue不会按预期工作，但是当我删除 Dialog 组件时它可以工作。我猜原因是该值是在组件安装之前设置的，但仍然找不到解决方案。

该值将从服务器检索，所以我不能使用 react-hook-form 的defaultValues.

https://codesandbox.io/s/react-hook-form-material-ui-twbbw

我曾尝试使用useState来控制输入值，但还有一个问题。清除输入后，点击提交按钮，出现错误提示，我输入的第一个字母不显示。

https://codesandbox.io/s/react-hook-form-material-ui-ve2en

我正在meterial-table与React. 我正在尝试从来自这样的 api 的数组中分配数据

<MaterialTable
  columns={columns}
  data={rows}
  ...
/>

在哪里columns和rows在API数据。但我收到此错误：

TypeError: Cannot add property tableData, object is not extensible

值得注意的是，当我使用模拟硬编码数据时，一切正常。经过一番搜索，我找不到任何解决方案，有什么帮助吗？

我将KeyBoardDatePickerfrom material-ui-pickerswithmoment utils用于 DatePicker。

import React, { Fragment, useState } from "react";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="D MMM, YYYY"
          onChange={handleDateChange}
          minDate={moment().subtract(6, "months")}
          maxDate={moment()}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

export default KeyboardDatePickerExample;

但它不能正常工作。

首先，它没有正确显示日期格式

当我尝试编辑时，它显示随机文本和错误invalid date format。

这是一个重现该问题的沙箱。

我究竟做错了什么？

编辑：

看到 …

我在这里使用select 组件的精确标记

        <FormControl
            variant="outlined"
            className={classes.formControl}
            error={errors.title ? true : false}
          >
            <InputLabel htmlFor="title">Who are you?</InputLabel>
            <Select
              labelId="titleLabel"
              id="title"
              value={state.title ? state.title : 'Example1'}
              onChange={handleChange}
              label="Who are you?"
            >
              <MenuItem value={`Example1`}>Example1</MenuItem>
              <MenuItem value={`Example2`}>Example2</MenuItem>
              <MenuItem value={`Example3`}>Example3</MenuItem>
              <MenuItem value={`other`}>other</MenuItem>
            </Select>
            {errors.title && <FormHelperText>{errors.title}</FormHelperText>}
          </FormControl>

然后我不断收到以下错误，不知道如何解决这个问题

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely …

我有一个使用 MUI 的 React 应用程序，现在我已经使用微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡，因为目前这种变化太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖关系

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

路由器块

这是应用程序的主要路由器，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由器切换容器

import React, { FC, Suspense } from "react";
import …

我试图摆脱主题中存在的最大宽度。
这是我在 Chrome 中看到的（如果我取消选中它，它会做我需要的）：

@media (min-width: 1280px)
.MuiContainer-maxWidthLg {
    max-width: 1280px;
}

我怎样才能做到这一点？我试过这样的事情：

const useStyles = makeStyles(theme => ({
    root: {       
        '& .MuiContainer-maxWidthLg' : {
             maxWidth: //No matter what I put here, it does not work
        }, 

但它似乎没有任何效果......我该如何覆盖它？

谢谢，

亚历克斯