标签: material-ui

我确信出于技术原因，这是一个坏主意，但还没有找到任何来源来解释它是否是或为什么。

假设我正在构建一个 React 网站，并且想要使用两个组件框架，比如 ant.design 和 material-ui，因为我喜欢 ant.design 所做的 90%，但我只是稍微更喜欢 material-ui 中的模态对话和想要将它们与 ant.design 组件结合使用。

他们俩似乎互相打得很好。

为什么这是一个坏主意？未来是否有潜在冲突？这会以某种方式增加膨胀吗？

我的任务是使我们的 react redux web 应用程序中的页面加载速度更快。

当加载页面的操作触发时，我们会看到大约 0.5 秒的小冻结。

我打开了分析器，乍一看似乎没有什么问题。
火焰图

没有不必要的重新渲染，显示的唯一黄色警告大约是 10 毫秒。

当我转到分析器中的排名选项卡时，我得到了一个稍微不同的故事，我发现大部分时间都花在了 withStyles() 上。
排名图

我们通过 withStyles() 在 JS 中使用 CSS 的 material-ui 方法，看起来好像使用 WithStyles() 显着影响加载速度。
是这种情况吗？或者这仅仅是“我一次渲染太多东西”的情况

将 JS 中的 CSS 转换为仅 CSS 将是一项重大的努力，尽管我确实花了一个小时在 JS 中撕掉了 CSS 并发现性能提高了大约 40%，尽管我不知道这 40% 中有多少是由于 withStyles 与页面上样式元素的性能。

当鼠标悬停在组件上时，我很难让 Material UI 工具提示真正出现。据我所知，我正在做工具提示组件的最简单实现：我直接导入它（没有自定义样式或其他任何东西），然后我将它包裹在另一个组件周围，该组件在顶层展开其道具。

从阅读文档来看，它应该是那么简单，但它并没有出现在悬停时，并且在 React DevTools 中，我看到 anchorEl 属性是未定义的。

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

规划器图标.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

我正在使用 ToolTip 组件，我有两个标题文本，只是想知道是否可以将它们呈现为两行（每种语言在一行中）而不是一行？如何将预期的样式应用到该组件？

这是代码：

renderToolTip = tipText => {
    const { classes } = this.props;
    if (tipText) {
      return (
        <Tooltip
          title={tipText}
          placement="left"
          classes={{
            tooltip: classes.tooltip,
          }}>
          <IconButton>
            <InfoOutlined />
          </IconButton>
        </Tooltip>
      );
    }
    return null;
  };

languageList = ['English', 'Spanish']
languageList.map(language => this.renderToolTip(language));

预期：每个文本换行，有人可以帮忙吗？

数据存储为：

 { iso: "gb", label: "United Kingdom", country: "United Kingdom" },
 { iso: "fr", label: "France", country: "France" }

传递给自动完成的值是：

{ iso: "gb", label: "United Kingdom", country: "United Kingdom" }

控制台报错

Material-UI：提供给自动完成的值无效。没有一个选项与{"label":"United Kingdom","iso":"gb","country":"United Kingdom"}.

报告的类型错误 value={}

输入'字符串| ICountry' 不可分配给类型 'ICountry | ICountry[] | 空| 不明确的'。类型 'string' 不能分配给类型 'ICountry | ICountry[] | 空| 不明确的'。

问题：将数据传递给组件并未将其设置为相应的选项，我对如何解决此问题一无所知。

问题代码沙盒：https ://codesandbox.io/s/charming-firefly-zl3qd?file =/ src/App.tsx

import * as React from "react";
import { Box, Typography, TextField, Button } from "@material-ui/core";
import { Autocomplete } …

我已经使用 MUI 和 React Hook Form 在 React 中构建了一个表单。我正在尝试创建一个用作Select Input的自定义TextField元素。我希望它是一个带有Ref道具的不受控制的组件。我试图按照 MUI 和 React Hook Form 文档的建议传递 inputRef 道具，但没有成功。

            <TextField
              id="id"
              name="name"
              select
              native="true"
              className={classes.textField}
              label="label"
              margin="normal"
              variant="outlined"
              inputRef={register({ required: "Choose one option" })}
              error={!!errors.name}
            >
              <MenuItem value="">Choose one option</MenuItem>
              <MenuItem value="3">03</MenuItem>
              <MenuItem value="6">06</MenuItem>
              <MenuItem value="9">09</MenuItem>
              <MenuItem value="12">12</MenuItem>
              <MenuItem value="16">16</MenuItem>
              <MenuItem value="18">18</MenuItem>
            </TextField>