小编Use*_*ser的帖子

是否可以让 Material-UI 自动调整 TextField 元素的宽度以匹配输入文本的宽度？

我正在创建一个表单视图/编辑页面，并将数据渲染回相同的字段，但是服务器还设置了一系列参数。如果能够在禁用的表单元素中进行渲染并自动调整其宽度，那就太好了。

我已经正确调整了 TextField 和底层输入的宽度，但没有成功。我可以在 JS 中计算字符数并设置宽度，但我更喜欢 CSS 解决方案。

<TextField
    disabled={true}
    label={"UUID"}
    value={"7be093a5647d41ff8d958928b63d11f5"}
    style={{width: "auto"}}
    InputProps={{
        style: {width: "100%"}
    }}
/>

https://codesandbox.io/s/material-demo-forked-c3llv

语境

我有一个 Django REST API，使用 PostgreSQL 数据库，包含数百万个项目。这些项目由多个系统处理，处理详细信息被发送回并存储在记录表中。简化模型为：

class Item(models.Model):
    details = models.JSONField()


class Record(models.Model):
    items = models.ManyToManyField(Item)
    created = models.DateTimeField(auto_created=True)
    system = models.CharField(max_length=100)
    status = models.CharField(max_length=100)
    details = models.JSONField()

目标

我想对 Items 表进行任意过滤并获取各种处理系统的摘要。此摘要获​​取每个系统的每个选定项目的最新状态，并显示每个状态的计数。例如，如果我过滤 1055 个项目，则返回的示例为：

{
System_1: [running: 5, completed: 1000, error: 50],
System_2: [halted: 55, completed: 1000],
System_3: [submitted: 1055]
}

我目前正在执行如下查询，它返回 System_1 的处理状态计数，并对其他系统重复并打包到 JSON 返回中。

Item.objects.filter(....).annotate(
    system_1_status=Subquery(
        Record.objects.filter(
            system='System_1',
            items__id=OuterRef('pk')
        ).order_by('-created').values('status')[:1]
    )
).values('system_1_status').annotate(count=Count('system_1_status'))

这将转换为 sql 查询：

SELECT 
    "api_item"."id", 
    "api_item"."details", 
    (
        SELECT 
            U0."status" 
        FROM 
            "api_record" U0 
        INNER JOIN 
            "api_record_items" …