如何使用material-ui显示只读列表？

Posted 2023-02-25

我需要显示一个包含多个项目的摘要页面，其中一个是列表。我希望列表看起来与选择类似（本机，带有滚动条），但是列表中的项目是不可选择的。我尝试使用具有多个本机readOnly和rows = 8属性的select，但它仅显示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>

答案

readonly HTML attribute仅受readonly和input（不支持textarea）支持。 select的最接近等效项是select属性。同样，disabled没有rows属性。为此，正确的属性是select。

以下是基于您的代码的工作示例，但使用select代替size，并在disabled中指定readOnly，并添加一些样式以从选项文本中删除禁用的外观。

size

inputProps