标签: material-ui

我正在寻找类似的东西来在 ReactJS/Material-UI 中实现。任何现有的组件或库？

我正在使用带有故事书的 Material UI V5，除了文档不会自动生成之外，一切似乎都运行良好。当我单击“文档”选项卡时，它只是一个空白屏幕。

我查看了这个使用 Material Ui V4 的存储库，并且有文档正在研究我是否可以找出哪里/是否出错。但没有铁砧。故事书 MUI v4

我没有做任何花哨的事情，实际上我所做的只是使用sb命令行工具安装故事书，安装 Material UI v5 并导出一个按钮。但是没有文档显示。

import React from "react";
import PropTypes from "prop-types";
import MiButton from "@mui/material/Button";

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  return <MiButton>GOT IM!</MiButton>;
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(["small", "medium", "large"]),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: "medium",
  onClick: undefined,
};

我正在使用 Material-UI 中的日期选择器，但实际格式是“mm/dd/yyyy”，我需要将其更改为“dd/mm/yyyy”，我该怎么做？

组件：

 <LocalizationProvider  dateAdapter={AdapterDateFns}>
      <DatePicker
        onError={(e) => {
          setError(true);
        }}
        label="Date"
        value={infos.date}
        onChange={(newValue) => {
          setInfos({ ...infos, date: newValue });

          setError(false);
        }}
        renderInput={(params) => (
          <TextField
            color={error ? "error" : "primary"}
            required
            error={error}
            helperText={error ? messageError.date : ""}
            {...params}
          />
        )}
      />
    </LocalizationProvider>

我正在使用Material UI v4库来构建 React Js 应用程序。

我创建了一个自定义浮动操作按钮 (FAB) 组件。

FAB 组件（下图中的红色框）必须粘贴到其父元素即 Flyout 组件（下图中的蓝色框）的右下角（有一些边距）。

Fylout 组件内部有一些子组件。它们是标题、Content 组件（Material UI 中的示例 Card 组件）和 FAB 组件。

由于某种原因，Flyout 组件的根元素必须具有absolute position可滚动 ( scroll: 'auto')（我无法在此处提及它们）。

我用于absolute positionFAB 组件。结果很好（当卡未展开时），如下图所示：

但是，当 Card 组件展开并且我们滚动 Flyout 组件时，FAB 组件并没有从其父组件中粘住更多，如下面的屏幕截图所示：

我尝试position: 'sticky'将 FAB 组件与bottom: 20和 一起使用right: 20，但 FAB 并未粘在 Flyout 组件的右下角，如下面的屏幕截图所示：

所以我的问题是如何使 FAB 按钮仅粘在 Flyout 组件的右下角？

这是简化的代码：https ://codesandbox.io/s/fab-stick-to-parent-w5ng3

我在使用MUI创建新的 React 项目时遇到此错误。我从文档中复制了此代码示例，该示例适用于他们的实时 Codesandbox，但不适用于我的本地。这是完整的错误消息：

ModuleNotFoundError
Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

以下是我的package.json：

ModuleNotFoundError
Could not find module in path: 'react/jsx-runtime' relative to '/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

我通过 React Select 有两个选择输入。我的第二个选择的 options 属性应该根据第一个反应选择中的值动态变化。做这个的最好方式是什么？

我的第一个选择：

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        placeholder="Select service category"
        name="color"
        options={serviceCategoriesPrimary}
        onChange={(value) =>
          value !== null ? setSelectValue(value.value) : setSelectValue("")
        }
      />

我的第二个选择：

      <Select
        styles={colourStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={isClearable}
        isSearchable={isSearchable}
        isDisabled={selectValue === "" ? true : false}
        placeholder="Select secondary category"
        name="color"
        options={handleChooseOptions}
      />

  const handleChooseOptions = () => {
    if(selectValue === 'Health Care'){
      return options1
    }else{
      return options2
    }
  }

我正在尝试将千位分隔符添加到我的 mui-textField 值中，知道我已经进行了数字分隔。我的代码如下所示：

<TextField\n                    size='small'\n                    label='Total Cotisations Encaiss\xc3\xa9es'\n                    value={\n                        totalEncaissement\n                         ?.toFixed(modeMO)\n                        ?.replace(/\\d(?=(\\d{3})+\\.)/g, "$& ") || 0\n                    }\n                    variant='outlined'\n                    fullWidth\n                    type={"number"}\n                />\n            </Grid>\n

当我添加替换时，该字段不会显示任何内容，但仅与 toFixed 一起工作完全正常。\n请有人帮忙

新的 Material UI DatePicker有一个 renderInput 属性，它获取渲染文本字段的函数。工作得很好，除了这个函数被渲染两次，并且在第一次渲染时它只接收它需要的一些道具。

当使用 React 测试库渲染时，仅发生第一次渲染。值得注意的是，endAdornment 不存在。因此不可能getByRole('button')单击按钮来打开选择器模式。

我尝试了waitFor()和的各种排列rerender()，但似乎无法显示按钮。

这是一个代码沙箱，显示了被注销的 renderInput 参数的两个版本。（我还在那里进行了一个测试来寻找按钮，但不幸的是我也对测试做了一些错误的事情并且它没有运行。）

有什么建议么？

我有一个可以打开和关闭材质 UI 对话框的组件。目前，页面上显示了一些文本，后面跟着一个用于打开对话框的按钮。我创建了一个代码沙箱来突出显示我的位置： https: //codesandbox.io/s/formdialog-material-demo-forked-cgjgh ?file=/demo.js:0-8775

当对话框打开时，是否可以在后台（即主页上）启用滚动，以便用户可以滚动文本作为示例？我已经添加了hideBackdrop道具，以便true隐藏背景，但我不知道如何做到这一点，以便可以启用主页上的滚动。

npm install @mui/material我想在 Angular 中使用but。不确定这是否有效。我也是 Angular 的新手。如果我们不能在 Angular 中使用 mui，是否有任何特定的 Angular 库可以提供 Material UI？