Как отобразить список только для чтения с помощью material-ui?

Question

Мне нужно отобразить сводную страницу с несколькими элементами, одним из которых является список.Я бы предпочел, чтобы список выглядел аналогично селекту (нативному, с полосой прокрутки), но элементы в списке нельзя было выбирать.Я попытался использовать select со свойствами множественного собственного readOnly и row = {8}, но он отображает только 4 строки, и элементы можно выбирать.

<Select
    style={{ width: '300px' }}
    input={<OutlinedInput />}
    IconComponent={() => (
        <ArrowDropDown style={{ display: 'none' }} />
    )}
    multiple
    native
    readOnly
>
    {task.devices.map(device => (
        <option key={device.id} value={device.id}>
            {device.systemName}
        </option>
    ))}
</Select>

Answer 1

Атрибут readonly HTML поддерживается только input и textarea (не select).Ближайшим эквивалентом для select является атрибут disabled.Точно так же нет атрибута rows для select.Правильный атрибут для этой цели - size.

Ниже приведен рабочий пример, основанный на вашем коде, но с использованием disabled вместо readOnly и указанием size в inputProps и добавлением некоторыхстиль, чтобы удалить отключенный вид из текста опции.

import React from "react";
import ReactDOM from "react-dom";

import Select from "@material-ui/core/Select";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
import { makeStyles } from "@material-ui/core/styles";

const task = {
  devices: [
    { id: 1, systemName: "Name 1" },
    { id: 2, systemName: "Name 2" },
    { id: 3, systemName: "Name 3" },
    { id: 4, systemName: "Name 4" },
    { id: 5, systemName: "Name 5" },
    { id: 6, systemName: "Name 6" },
    { id: 7, systemName: "Name 7" },
    { id: 8, systemName: "Name 8" },
    { id: 9, systemName: "Name 9" },
    { id: 10, systemName: "Name 10" },
    { id: 11, systemName: "Name 11" }
  ]
};
const useStyles = makeStyles({
  readOnlySelect: {
    width: 300,
    "&.Mui-disabled option": {
      color: "black"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <Select
      className={classes.readOnlySelect}
      input={<OutlinedInput />}
      IconComponent={() => <ArrowDropDown style={{ display: "none" }} />}
      multiple
      native
      disabled
      inputProps={{ size: 8 }}
    >
      {task.devices.map(device => (
        <option key={device.id} value={device.id}>
          {device.systemName}
        </option>
      ))}
    </Select>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);