如何為自動完成 material-ui 演示禁用多行？

Question

material-ui 自動完成演示的國家/地區選擇使用 react-select 和 material-ui 控件，顯示多行文本，選擇控件在國家/地區不適合一行時更改其尺寸。

當我減小 Web 瀏覽器的寬度時，我在 CodeSandbox 看到了這種行為。

如何修改演示以便國家/地區始終適合一行，選擇控件不會更改其尺寸？

Answer 1

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

如果這不是您所需要的，那么您可以將以下 css 添加到TextField的文本中，以便文本不會換行：

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