小编Oli*_*ari的帖子

我的表单上有一个 MUIRadioGroup（选项 = 低、中和高）和一个多选 MUIAutocomplete 组件。

<MUIRadioGroup
              name="requestDetail.riskAssesmentDetail.riskClassification"
              label="Risk Classification"
              variant="outlined"
              size="small"
              defaultValue
            />

<MUIAutocomplete
                  name="requestDetail.riskAssesmentDetail.safetyDetail.investigationType"
                  label="Type of Investigation"
                  variant="outlined"
                  size="small"
                  multiple
                  disableCloseOnSelect
                  options={API_Safety_InvestigationType}
                />

我的架构是...

requestDetail: yup.object().shape({ ...
    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup
        .string()
        .label("Risk Classification")
        .required()
        .typeError("Invalid Selection"),
      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),
    }),

当单选按钮为“中”或“高”时，我需要对 MUIAutocomplete 组件执行验证。

我收到错误...

Uncaught (in promise) TypeError: branch is not a function
    at Condition.fn (index.esm.js:175:1)
    at Condition.resolve …

我正在尝试更改 MUI X DatePicker（带有 Material UI）日期文本和日历图标颜色。
我尝试将其传递样式更改为 InputProps，但它仅适用于删除边框。
相反，没有任何改变，我尝试将样式应用于 theme.tsx，但它也没有帮助。任何帮助将不胜感激。

import * as React from "react";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import { makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles(() =>
  createStyles({
    noBorder: {
      outline: "none",
      border: "none",
      color: "#fff",
    },
  })
);

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>();
  const classes = useStyles();

  const handleChange = (newvalue: …

在此输入图像描述

我正在做版本 "@material-ui/core": "^4.12.3"，现在版本已经改变了。我正在寻找方法：

import { GridOverlay, DataGrid } from '@mui/x-data-grid';

但它不起作用。任何人都可以帮助我设置旧版本的版本和文档，以便我在应用程序中使用这两个版本。

我想在DatePickerfrom @mui/lab(5.0.0-alpha.55) 中添加一个“清除”按钮。

我正在尝试什么：

• 在 state 中存储一个date字段，作为valueprop 传递给DatePicker
• 当需要“清除”值和输入时将其更改date为null

我观察到的行为：

• 如果date有效，则按预期工作，并且输入被清除
• 如果date无效，则error清除，但无效日期仍保留在输入中。

我尝试过的显示上述行为的基本版本可以在此处看到。

如果您输入了部分日期，然后单击clear，您可以观察到输入的内容没有被清除。

我宁愿避免涉及更改 的解决方案key，因为这会带来其他问题，例如不尊重将 更改为 的外部源date，null以及label在清除输入时需要额外的技巧来尊重转换。

我找不到任何方法使用ThemeProviderMaterial UI 来定位根元素。

const theme = createMuiTheme({
  palette: {
    background: {
      default: "#00000",
      backgroundColor : 'black',
      backgroundImage: 'url(/bg.jpg)',
      backgroundPosition: 'center',
      height:'100%'
    },
    primary: {
      light: '#757ce8',
      main: '#fff',
      dark: '#002884',
      contrastText: 'grey',
    },
  },
});

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

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

<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和使用 …

我将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。

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

我究竟做错了什么？

编辑：

看到 …

我正在寻找一种增加材质 UIDivider线条粗细的解决方案（垂直拉伸水平线或水平拉伸垂直线）。

我已阅读https://mui.com/material-ui/api/divider/上的 Material UI v5 文档。

根据 API，没有可以修改分隔线“厚度”的属性。

我尝试过内联样式的不同实现（特定于 Material UI v5）：

<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>

上述属性均未修改线条的“粗细”。

我正在寻找特定于 Material UI v5 Divider 组件的解决方案。我不想创建 Box 组件，然后为该 Box 组件实现内联 sx 属性或自定义类。

有人有什么想法吗？

我正在制作一个用 yup、react-hook-form 和 Material UI DatePicker/TextField 制作的注册表单。我想要一个出生日期字段来检查用户是否年满 18 岁。错误消息会正确显示，但错误状态的红色仅在输入为空时有效（并且年龄低于 18 岁时无效）。我正在控制台记录指示红色的“无效”值，并且在应该时将其设置为 true。

这是一个沙箱链接： https://codesandbox.io/s/datepicker-yup-validation-8rod3 ?file=/src/App.js