如何在 mui 中向边框添加标签？

Question

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

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

列表的打字稿代码：

<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

这是我使用 React 和 Mui 的答案（仅适用于图标）。
它依赖于柔性。

我们有一个主容器，只绘制其左、下、右边框。
然后，我们有一个标题容器，负责将顶部边框分为两部分（之前和之后）以及带有图标和标题的部分。

您可以传递一个图标和一个标题，也可以仅传递一个标题、仅传递一个图标，或者什么都不传递。

borderedSection.js：

import React from "react";
import SvgIcon from "@mui/material/SvgIcon";
import styles from "./borderedSection.module.scss";

function BorderedSection({ icon, title, children }) {
    return (
        <div className={styles.mainContainer}>
            <div className={styles.header}>
                <div className={styles.headerBorderBefore}></div>
                {(icon || title) && (
                    <div className={styles.headerTitle}>
                        {icon && <SvgIcon component={icon} />}
                        {title && <span className={styles.title}>{title}</span>}
                    </div>
                )}
                <div className={styles.headerBorderAfter}></div>
            </div>
            <div className={styles.childrenContainer}>{children}</div>
        </div>
    );
}

export default BorderedSection;

borderedSection.module.scss：

$border-color: #b2b2b2;

.mainContainer {
    display: flex;
    flex-direction: column;
    max-width: 100%;

    border-left: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    border-right: 1px solid $border-color;
    border-radius: 5px;
    margin: 1em;

    .childrenContainer {
        padding: 1em;
    }

    .header {
        display: flex;
        flex-direction: row;
        width: 100% !important;

        .headerBorderBefore {
            border-top: 1px solid $border-color;
            width: 1em;
            border-top-left-radius: 5px;
        }

        .headerTitle {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.25em;
            width: fit-content;
            height: 2em;
            margin: -1em 0.5em 0em 0.5em;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 1em;
            font-weight: 600;
        }

        .headerBorderAfter {
            border-top: 1px solid $border-color;
            width: 1em;
            flex-grow: 2;
            border-top-right-radius: 5px;
        }
    }
}

用法：

import React from "react";
import BorderedSection from "./borderedSection";
import InfoIcon from "@mui/icons-material/Info";

function Example() {
    return (
        <div style={{ padding: "2em" }}>
            <BorderedSection icon={InfoIcon} title="Icon and title">
                <div>a first child with quite a long text</div>
                <div>a second child</div>
            </BorderedSection>

            <BorderedSection title="Title only">
                <div>a first child with quite a long text</div>
                <div>a second child</div>
            </BorderedSection>

            <BorderedSection icon={InfoIcon} >
                <div>Icon only</div>
                <div>a second child with quite a long text</div>
            </BorderedSection>

            <BorderedSection >
                <div>No icon and no title</div>
                <div>a second child with quite a long text</div>
            </BorderedSection>
        </div>
    );
}

它看起来是这样的：

我希望它有帮助

Answer 2

我现在设法破解了一个看起来相同的解决方案。我仍然希望有一种干净的方法可以做到这一点：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>