小编Oli*_*ari的帖子

假设我有一个options变量,我想设置一些默认值.

这两种选择的好处/缺点是什么？

使用对象传播

options = {...optionsDefault, ...options};

或者使用Object.assign

options = Object.assign({}, optionsDefault, options);

这是让我惊讶的提交.

我试图用我的 React 18.0 项目安装 Material UI 和图标，但我不能。该项目是使用最新的create-react-app创建的 npm install @material-ui/core @material-ui/icons

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.3
npm ERR! node_modules/@material-ui/core
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"*" from the root project
npm …

出于某种原因，我无法让material-ui日期选择器工作。每次在 React 中呈现日期选择器时，都会抛出以下错误：

RangeError：格式字符串包含未转义的拉丁字母字符 n

我只使用日期选择器（https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js）创建了一个stackblitz，即使在那里错误也会出现。我究竟做错了什么？我想我遵循了安装指南中的所有说明。

链接到 material-ui/pickers：https : //material-ui-pickers.dev/

我正在尝试创建一个Autocomplete实质上仅向用户显示搜索结果的 Material UI 组件。某些选项的名称可能会重复，但它们都有唯一的 ID。我收到以下警告：

\n

index.js:1 警告：遇到两个具有相同键的子项，Name B。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 \xe2\x80\x94 该行为不受支持，并且可能在未来版本中更改。

\n

const SearchField = () => {\n    const [open, setOpen] = React.useState(false)\n    const [searchQuery, setSearchQuery] = React.useState('')\n    const [searchResults, setSearchResults] = React.useState([])\n    const loading = true //later\n\n    const debounced = useDebouncedCallback(\n        async searchQuery => {\n            if (searchQuery) {\n                let result = await doSearch(searchQuery)\n                if (result.status === 200) {\n                    setSearchResults(result.data)\n                } else {\n                    console.error(result)\n                }\n            }\n        },\n        1000\n    )\n\n    const handleInputChange = e => …

当我尝试从 Material UI 导入一些图标时，我可以看到此错误。我按照建议安装了一些模块，但仍然没有修复。

包.json

    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",

我尝试使用以下命令安装 /utils，

$ npm install @mui/material/utils

错误：

npm ERR! code ENOLOCAL
npm ERR! Could not install from "@mui\material\utils" as it does not 
contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Han\AppData\Roaming\npm-cache\_logs\2021-10-03T21_47_03_649Z-debug.log

有什么我错过的吗？

**经过一番研究，我删除了“@material-ui/core”并安装了“@mui/core”。我认为出现此错误是因为名称从material更改为mui？

    "@mui/core": "^5.0.0-alpha.49",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",
    "@mui/utils": "^5.0.1",

谢谢。

我发现Material UI的官方网站正在使用@material-ui/core和@mui/material。

但我发现如果我使用@material-ui/core或@mui/materialTextfield，UI 不起作用，问题如下所述

React - 材质标签不在文本字段中的正确位置

如果您在 Google 中搜索 Material UI，然后转到https://mui.com/，它会告诉您npm install @mui/material。但几周前，我正在使用npm install @material-ui/core

如果我的 package.json 中同时包含@material-ui/core和，并且我将 和都包含在 中，是否会出现任何导致 UI 混乱的冲突@mui/materialscriptstylesheetindex.html

更新 1
在@muiCodeSandbox 中，
如果您尝试Textfield使用selectprop，当您打开选择时，overflow: hidden将添加到正文中。

https://codesandbox.io/s/selecttextfields-material-demo-forked-z6b9f?file=/demo.js

在我的项目中， overflow: hidden; padding: 15px已添加到正文中，但我检查过我对此什么也没做！

创建 ThemeSetting.tsx 上下文后，我无法使用 <Button><Button> 所有使用themeMaterial UI React.js、TypeScript 的东西：

错误

TypeError：无法读取未定义的属性（读取“创建”）push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67

  64 | minWidth: 64,
  65 | padding: '6px 16px',
  66 | borderRadius: theme.shape.borderRadius,
> 67 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
     | ^  68 |   duration: theme.transitions.duration.short
  69 | }),
  70 | '&:hover': _extends({

和主题设置.tsx

import { createTheme, ThemeProvider } from "@mui/system";

export const ThemeContextProvider: React.FC<{}> = ({ children }) => {
    const theme = createTheme({
        palette: {
            navbar: blue[100],
            tag: {
                red: red[200],
                pink: pink[200], …

我正在使用 MUI System v5 开发一个新项目。我在这里使用styled()实用程序（不是样式组件）来设计和创建简单的 UI 组件。该项目采用 TypeScript。我现在有很多困难，因为我不知道是否以及如何将道具传递给这些组件。例如，我有一个这样的组件：

import { styled } from '@mui/system';


const InputField = styled('input')(({ width }) => ({
  width: width
}));

我想以这种方式使用它：

return <InputField width={100}>

但它给了我一个错误：

Property 'width' does not exist on type '{ theme?: Theme; as?: ElementType<any>; sx?: SxProps<Theme>; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { ...; }'.ts(2339)

所以我的问题是：如何为此类 Material UI 组件提供额外的 props？

在 Material UI v5 的 prop 中寻找巧妙的条件样式sx。我玩过的一个例子是：

const statusStyle = (status) => {
  switch (status) {
    case "aborted":
      return "#D66460";
      break;
    case "queue":
      return "#6685F0";
      break;
    case "processing":
      return "#F0E666";
      break;
    default:
      return "#60D660";
  }
};

<TableRow
  key={job.job}
  sx={{ color: statusStyle(status) }}
>

但我想知道是否有人想出了更优雅的东西？

inputProps和之间有什么区别InputProps？下面的2TextField做同样的事情。我什么时候必须选择其中之一？

<TextField
  label="inputProps"
  inputProps={{
    name: 'inputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

<TextField
  label="InputProps"
  InputProps={{
    name: 'InputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>