如何在 mui 中将 label 添加到边框？

Question

我想要一个包含在边框中的列表，该边框的外观和行为与文本字段边框相同：示例文本字段和列表应具有相同的边框。

在图像中，列表周围的边框看起来与文本字段周围的边框相似，但最值得注意的是，缺少 label。 如何添加 label 以及如何设置焦点侦听器以获得相同的 hover 和选择行为？

列表的 typescript 代码：

<List dense sx={{ borderRadius: 1, border: 1, borderColor: 'grey.600'}}>
   <ListItem secondaryAction={<IconButton edge="end" aria-label="delete"><DeleteIcon /></IconButton>}>
      <ListItemText primary="primary" secondary="group id"/>
   </ListItem>
</List>

我也对替代方法持开放态度。 谢谢您的帮助。

Answer 1

我现在设法破解了一个看起来相同的解决方案。 我仍然希望有一种干净的方法可以做到这一点： result 。

<FormLabel style={{marginLeft: "0.71em", marginTop: "-0.71em", paddingLeft: "0.44em", zIndex: 2, width: "4.2em", backgroundColor: "#383838", position: "absolute", fontSize: "0.75em"}}>Damage</FormLabel>
<List dense sx={{ borderRadius: 1, border: 1, borderColor: 'grey.600', "&:hover": { borderColor: 'grey.200' }}}>
   <ListItem secondaryAction={<IconButton edge="end" aria-label="delete"><DeleteIcon /></IconButton>}>
      <ListItemText primary="primary" secondary="group id"/>
   </ListItem>
</List>

Answer 2

我需要同样的东西。 当我四处寻找时，我注意到 MUI 通过使用 fieldset 标记来实现这一点。 我创建了一个快速而肮脏的组件（OutlinedBox）来获得这种效果：

import React from "react";
import {Box, FormLabel} from "@mui/material";

const OutlinedBox = (props) => {
  const {
    label,
    children
  } = props;
  return (
    <Box>
      <FormLabel
        sx={{
          marginLeft: "0.71em",
          marginTop: "-0.71em",
          paddingLeft: "0.44em",
          paddingRight: '0.44em',
          zIndex: 2,
          backgroundColor: (theme) => theme.palette.background.default,
          position: "absolute",
          fontSize: "0.75em",
          width: 'auto',
        }}>{label}</FormLabel>
      <Box
        sx={{
          position: 'relative',
          borderRadius: theme => theme.shape.borderRadius + 'px',
          fontSize: '0.875rem',
        }}
      >
        <Box
          sx={{
            padding: (theme) => theme.spacing(1),
            display: 'flex',
            gap: (theme) => theme.spacing(1),
            flexWrap: 'wrap',
            overflow: 'auto'
          }}
        >
          {children}
        </Box>
        <fieldset aria-hidden={"true"} style={{
          textAlign: 'left',
          position: 'absolute',
          bottom: 0,
          right: 0,
          top: '-5px',
          left: 0,
          margin: 0,
          padding: '0 8px',
          pointerEvents: 'none',
          borderRadius: 'inherit',
          borderStyle: 'solid',
          borderWidth: '1px',
          overflow: 'hidden',
          minWidth: '0%',
          borderColor: 'rgba(255, 255, 255, 0.23)',
        }}
        >
          <legend style={{
            float: 'unset',
            overflow: 'hidden',
            display: 'block',
            width: 'auto',
            padding: 0,
            height: '11px',
            fontSize: '0.75em',
            visibility: 'hidden',
            maxWidth: '100%',
            '-webkit-transition': 'max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms',
            transition: 'max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms',
            whiteSpace: 'nowrap',
          }}><span>{label}</span></legend>
        </fieldset>
      </Box>
    </Box>
  );
}

export { OutlinedBox };

// Example usage: <OutlinedBox label="Test">Some content here</OutlinedBox>

我想我会把它贴在这里，以防有人需要同样的东西并遇到这个问题。 所有的样式都是从 MUI 使用的 styles 复制而来的。 可能有更好的方法可以从主题中读取其中的一些内容，因此如果有人决定使用它，您可能需要对其进行一些调整。