标签: material-ui

我想创建具有选择属性但也能够在其中编写自定义文本的输入元素。我正在使用 React 和 Material-UI。

是否可以在 Material-UI 的 TextField 组件内（在输入下方的 div 内）添加元素。

目前：Usluga grupni Pos ....

添加元素：

<div class="MuiFormControl-root-142 ...>
  <label class="MuiFormLabel-root-151 ...>Usluga</label>
  <div class="MuiInput-root-156 ...>
    <input aria-invalid="false" ... list="services" value="">
    <datalist id="services">
      <li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span> 
      </li>
      <li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
      </li>
    ....
  </div>
</div>

目前反应：

<TextField
  id="service"
  label="Usluga"
  className={classes.textField}
  margin="normal"
  onChange={handleChange}
  inputProps={{
   list: "services"
  }}
/>
<datalist id="services">
 {
   services.map(option => (
     <MenuItem key={option.id} value={option.service}>
      { option.service }
     </MenuItem>
    ))
 }
</datalist>

如果这是不可能的，还有什么方法可以做到这一点？

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

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

<TableRow
        className={classes.tableBody}
      >

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

所以我对 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 …

通常，当我们使用 popover 时，我们将鼠标事件期间的锚点设置为event.currentTarget。

然而，这在某些情况下是不可能的，而在其他情况下是不受欢迎的。- 如何直接设置弹出框锚元素？

import React from "react";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

export default function SimplePopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    //setAnchorEl(event.currentTarget);
    setAnchorEl(); //How to refer to the div?
  }

  function handleClose() {
    setAnchorEl(null);
  }

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Typography>Anchor point of popover here</Typography>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open} …

我正在使用材料 ui 框架的分隔器组件，并且坚持颜色变化方面。对于这个框架中的大多数其他组件，我已经能够通过应用 useStyles() 方法来更改颜色，如下所示：

const useStyles = makeStyles(theme => ({
    textPadding: {
      paddingTop: 10,
      paddingBottom: 10,
      color:'white',
    },
}));

但我无法使用相同的方法更改分隔线的颜色：

const useStyles = makeStyles(theme => ({
dividerColor: {
  backgroundColor: 'white',
},
}));

我当然然后将它应用于组件：

<Divider classname={classes.dividerColor}></Divider>

我查找了它的文档，但无法弄清楚我做错了什么。有人可以帮帮我吗？

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}> …

我尝试使用 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 …