小编Nea*_*arl的帖子

我正在尝试yup使用formik. 我的验证似乎有效，但我觉得它太冗长了。

试图使用 的.addMethod()功能yup，但在语法上陷入困境，或者这可能是矫枉过正？

摘要：我想将我的验证转换为使用yup.addMethod().

实际验证：

import * as yup from 'yup'

const countryNameRegex = /[A-Za-z]/g;
const countryCodeRegex = /[a-zA-Z]{2,}/g;
const isRequired = 'Required Field'
const isCorrectFormat = 'The country name may contain only letters'

const countryValidationSchema = yup.object().shape({
  name: yup.string()
    .min(3, `country name must contain at least 3 characters`)
    .matches(
      countryNameRegex,
      {
        message: isCorrectFormat,
        excludeEmptyStrings: true
      }
    )
    .label(`Country Name`)
    .required(isRequired),
  code: yup.string()
    .length(2, `The country code must be …

我正在尝试使用主题覆盖进行样式设置，如此处文档中所述：

我有以下代码沙箱：

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          background: '#000',
        },
      },
    },
  },
});

export default function GlobalThemeOverride() {
  return (
    <ThemeProvider theme={theme}>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            variant="standard"
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
    </ThemeProvider>
  );
}

选择框应该有背景，#fff但根本没有设置背景。:(

我无法在 Material-UI 数据表的每一行中添加一个按钮我有一个 Material-UI 数据表，我像这样渲染

<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

我已将按钮应位于的列变量“操作”列添加到列中。行只是我从道具中获得的数据对象。如何在每一行中添加一个按钮（用于编辑行）？我尝试映射数据数组，但不可能将 JSX 按钮添加到每个数据对象中

我已经完成了一些样式，正如您在这个沙箱上看到的那样，但我无法找出它的占位符文本。我不确定为什么会发生这种情况？

链接到 CodeSandbox：

https://codesandbox.io/s/nifty-rgb-ro8to?file=/src/components/Countries.js

export default function Countries({ formValues, setFormValues }) {
  const [data, setData] = useState([]);
  const [search, setSearch] = useState({ country: "" });
  const { register, handleSubmit } = useForm();

  // Fetch Data From Api
  useEffect(() => {
    const fetchData = () => {
      fetch("https://restcountries.eu/rest/v2/all")
        .then((res) => res.json())
        .then((result) => setData(result))
        .catch((err) => console.log("error"));
    };
    fetchData();
  }, []);

  const options = data.map((d) => ({
    label: d.name
  }));

  function handleChange(item) {
    setSearch(item);
  }

  function onSubmit(values) {
    setFormValues({
      ...formValues,
      ...values, …

我已经react-hook-forms从 v.6迁移到 v.7。

更改register方法后，如迁移指南中所指出的，出现以下错误：

'string' 类型的参数不能分配给 ' ${string}|类型的参数 ${string}.${string}| ${string}.${number}'。TS2345

注册需要一个字符串名称，我正确地提供了一个参数，它肯定是一个字符串，但无论如何它不接受我的参数，如果我不完全传递字符串。

任何有类似问题或任何想法的人都受到高度赞赏。提前致谢！

我有一个日期选择器，当用户单击字段中的任意位置而不仅仅是日历图标时，我想显示该日期选择器。

这是选择器

export function DatePickerField(props) {
  ......

  return (
      <Grid container>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                  {...field}
                  {...props}
                  disableToolbar
                  inputVariant="outlined"
                  value={selectedDate}
                  onChange={_onChange}
                  error={isError}
                  autoOk
                  invalidDateMessage={isError && error}
                  helperText={isError && error}
              />
          </MuiPickersUtilsProvider>
      </Grid>
  );
}

我需要这样做，因为如果手动输入日期，它不会抛出任何错误，但我会获取invalid date表单数据。

单击字段时如何显示选择器？

我正在从 MUI v4 迁移到 v5。在 v4 中，我使用clsxwithTextField来添加条件样式。

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      // ...
    },
    valid: {
      "& fieldset": {
        borderColor: theme.palette.success.main,
        borderWidth: 2
      }
    }
  })
);

const classes = useStyles();
<TextField
  {...props}
  className={clsx(classes.root, { [classes.valid]: isValid })}
/>

我正在尝试在 MUI v5 中找到类似的方法。clsx除了 with和之外，MUI v5 中的条件样式还有其他选择吗makestyles？

如果需要更多信息，请告诉我。

我刚刚从 Material-UI v4 升级到 v5（现在是 MUI）。如果我有一个DataGrid组件和一个类似组件的组件Select（aMenuItem也有问题），则该Select组件将无法正常工作。加载的一些附加样式会DataGrid干扰它。

我将在此处展示的示例是，值不再是下拉列表，而是水平列出，全部粉碎在一起。请注意，DataGrid此演示故意为空。

与预期的功能相反，如下所示：

我已将代码放在CodeSandbox上

请注意，它"@mui/x-data-grid": "^4.0.0"依赖于"@material-ui/core": "^4.12.3". 我对此感到不舒服，但它确实将其列为依赖项（除非我在某个地方错过了某些东西）。

我是否遗漏了什么，或者我正在使用的最新版本是否存在错误DataGrid？顺便说一句，我的实际应用程序中的所有功能都DataGrid运行良好。

为了完整起见，我还将在此处包含代码：

import React from "react";
import { render } from "react-dom";

import { DataGrid } from "@mui/x-data-grid";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

function App() {
  return (
    <div>
      <Select>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
      {/* with DataGrid, Select will shown …

我为我的项目创建了一个手风琴。但我希望仅在单击展开图标时才展开面板。目前，它正在通过单击面板上的任意位置进行扩展。我们可以定制它的扩展行为吗？

代码：

import React from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() {
return (
    <div style={{}}>
    <h4>How to create Accordion in ReactJS?</h4>
    <Accordion style={{ width: 400}}>
        <AccordionSummary 
         expandIcon={<ExpandMoreIcon />}
         aria-controls="panel1a-content"
        >   
          <div>Click to Expand</div>
        </AccordionSummary>
        <AccordionDetails>
        <Typography>Greetings of the day :)</Typography>
        </AccordionDetails>
    </Accordion>
    </div>
);
}

FlatButton is deprecated and shouldn't be used. Used TextButton instead.

在我以前的FlatButton小部件上，我能够在按下时更改启动颜色。但现在我正在使用TextButton小部件，如何在小部件上MaterialApp ThemeData或直接在TextButton小部件上有效地更改其颜色。

目前这是我的 TextButton

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
    textStyle: TextStyle(
      color: Colors.black45,
      fontFamily: "Courier Prime",
    ),
    backgroundColor: Colors.transparent,
  ),
  onPressed: () {},
  child: Text(
    "Student",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

overlayColor is used to indicate that the button is focused, hovered, or pressed.

但我找不到这个overlayColor