小编kei*_*kai的帖子

我有一个 Material UI 自动完成功能，它根据您键入的 3 个字母选择其项目，例如：

您想获取数据库中的所有 Pedro，然后键入“Ped”，它只会为您带来以“Ped”开头的结果。

问题是当我点击自动完成它会立即显示消息“没有选项”，比如

我希望它只在我输入 3 个字符后显示，并且在数据库中没有找到任何“Ped”，例如：

我试图在道具“noOptionsText”中放置一个条件，但它没有用。有谁知道怎么做？

编辑：不使用freeSolo，选项需要是一个对象

我想从 react-phone-number-input 为 PhoneInput 组件提供一个材质 UI TextField 组件作为inputComponent道具。

但是，我似乎无法成功应用参考。尽管我看到 Material UI TextField 组件呈现到 UI 并且状态已成功更新为该值，但在键入第一个值后它仍然失去焦点。

import React, { forwardRef, createRef } from 'react';
import { TextField } from '@material-ui/core';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const SampleComponent = ({ handleChange }) => {

const phoneInput = forwardRef((props, ref) => {

return (
  <TextField
    inputRef={ref}
    fullWidth
    label="Phone Number"
    variant="outlined"
    name="phone"
    onChange={handleChange}
  />
  );
});

const ref = createRef();
return (
    <PhoneInput ref={ref} inputComponent={phoneInput} />
   );
  };

想在右上角的标题部分添加一个关闭图标。

请帮我解决一下这个。我使用了 Material UI 对话框。一切正常，但我想在顶部有一个关闭按钮。

我有一个Rowof 按钮，其父级为SingleChildScrollView, 水平方向。包装行的元素后SingleChildScrollView不尊重mainAxisAlignment，特别是 spaceBetween，它们在一起，中间没有空格......

我怎样才能让 spaceBetween 再次工作？

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: const [
      TransportModeButton(
        iconPath: 'images/icons/walking_icon.png',
        text: 'Walking',
      ),
      TransportModeButton(
        iconPath: 'images/icons/bicycle_icon.png',
        text: 'Bike & eScooter',
      ),
      TransportModeButton(
        iconPath: 'images/icons/public_transport_icon.png',
        text: 'Public transport',
      )
    ],
  ),
),

我正在尝试在 react-pdf 中使用斜体样式。

一切正常，直到我使用font-style: italic;.

在 react-pdf 中是否有另一种方式将文本样式设置为斜体？

const Italic = styled.Text`
  font-size: 12px;
  lineheight: 20px;
  text-align: left;
  font-family: "Roboto Condensed";
  letter-spacing: 0.5px;
  font-style: italic;//problem is with this line
  font-weight:400;
`;

它给了我错误：

未捕获（承诺）错误：无法解析未定义的字体，fontWeight 400

我正在使用反应选择最新来创建异步选择组件。一旦我选择了某个值，我就尝试更改选择的背景颜色和边框颜色。我浏览了文档并尝试使用state.isSelected有条件地更改背景颜色。但没有帮助。

当选择如下值时，我想更改背景颜色和边框颜色。但似乎什么也没有发生。如有帮助，将不胜感激

我正在使用React Material-UI库，我想有条件地覆盖 TextField 的错误颜色。

当错误属于某种类型时，我需要将 helperText、边框、文本和所需的标记颜色更改为黄色。类似的东西：

否则，我想为所有其他类型的错误保留默认颜色（红色）。我试图遵循在这个代码和盒子中使用的相同原则，但我无法掌握需要更改的所有组件，而且我important几乎每次都必须使用关键字才能看到差异。

我设法有条件地改变了这样的颜色helperText：

                        <TextField
                            label="Name"
                            className={formClasses.textField}
                            margin="normal"
                            variant="outlined"
                            required
                            error={!!errors}
                            helperText={errors && "Incorrect entry."}
                            FormHelperTextProps={{classes: {root: getColorType(AnErrorType)}}}
                        />

该getColorType会返回一个CSS对象和属性颜色设置为对应给定的错误类型之一。前任：

hardRequiredHintText: {
    color: `${theme.palette.warning.light} !important`
},

有没有更简单的方法来覆盖 MUI 错误颜色并查看它反映在所有使用它的组件中？

我正在使用 Menu frommaterial-ui并想更改背景颜色。问题是，当我为菜单赋予颜色时，它会在出现菜单弹出窗口时更改整个页面背景。当我将颜色应用于菜单项时，它会在顶部和底部留下一些灰色阴影，因为所有这些菜单项都包含在一个 div 中。问题沙箱：https : //codesandbox.io/s/material-ui-dropdown-background-color-g88e1

更改菜单背景颜色的正确方法是什么？

我试图createMuiTheme改变这一点，但它改变了我的应用程序中所有菜单的颜色。我只想将此样式应用于其中一个菜单项。所以寻找解决方案来使用makeStyle

我目前正在创建一个弹出对话框。但是，我的对话框位于中间弹出的位置。

当我按下弹出按钮时，如何使位置位于页面的最顶部？

这是我的代码

      <div>
      <div id="so_reg" className="buy_btn" onClick={this.onClickCashBuy.bind(this)}>
         Pop up button
        </div>
         <Dialog className="dialog" modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
               <Test product={{price: this.state.buy_cash_type}} />
      </Dialog>
   </div>

我想让鼠标滚轮水平滚动表格。

我该怎么做？

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

.container {
  overflow-x: auto;
}


tr:nth-child(even){background-color: #f2f2f2}

逻辑代码：

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

.container {
  overflow-x: auto;
}


tr:nth-child(even){background-color: #f2f2f2}

这是我的演示： https: //codesandbox.io/s/github/Kalipts/scroll_table