Question

国家选择 autocomplete demo at material-ui 使用react-select和material-ui控件，显示多行文字，当国家/地区不适合一行时，选择控件会更改其尺寸。

当我减小Web浏览器的宽度时，我在CodeSandbox上看到了这种现象。

如何修改演示，使国家/地区始终排成一行，选择控件不会更改尺寸吗？

Answer 1

TextField具有可以更改的道具multiline，rows和rowsMax道具。

如果这不是您所需要的，则可以在TextField的文本中添加以下CSS，以使文本不会自动换行：

overflow: hidden;
white-space: nowrap;

Answer 2

我通过混合一些不同的东西来解决这个问题：

首先创建一个像这样的类：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    closed: {
      flexWrap: "nowrap",
      overflowX: "hidden",
    },
    // Add a linear gradient behind the buttons and over the Chips (if applies)
    endAdornment: {
        background:
            "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 22%, rgba(255,255,255,1) 60%)",
        bottom: 0,
        display: "flex",
        alignItems: "center",
        right: "0 !important",
        paddingRight: 9,
        paddingLeft: theme.spacing(2),
        top: 0,
},
  })
);

然后在您的静态函数中添加：

const onOpenChange = (open: boolean | null) => {
    setIsOpen(open);
};
const inputStyle = clsx({
    [classes.closed]: !isOpen, //only when isOpen === false
});

最后在“自动完成”组件本身上使用：

classes={{ inputRoot: inputStyle, endAdornment: classes.endAdornment }}
onOpen={() => onOpenChange(true)}
onClose={() => onOpenChange(false)}

Answer 3

如果您想知道如何使每个选项只显示在一行中并带有省略号，您可以执行以下操作：

<Autocomplete
...
getOptionLabel={(option: any) => `${option.label} (${option.code})`}
renderOption={(option) => (
        <React.Fragment>
          <div style={{ textOverflow: 'ellipsis', overflow: "hidden", whiteSpace: "nowrap" }}>
            {option.label} ({option.code})
          </div>
        </React.Fragment>
      )}
...
/>

对于 Country Demo 示例，您可以查看我在这里所做的：https://codesandbox.io/s/autocomplete-with-ellipsis-i8hnw

如何禁用自动完成Material-UI演示的多行？

3 个答案: