将文本移动到边框内

Question

我正在尝试将文本移动到父元素的粗边框内。我正在使用 material-ui，我的组件看起来像这样：   <List className={classes.root}>       <Typography className={classes.fieldLabel}>Attach PDF</Typography>             {/***SOME CODE**/}  </List>2 个元素的样式（root 和 fieldLabel 类）：root: {    width: "100%",    maxWidth: 360,    border: "3px solid #388FCE",    marginLeft: "3%",    maxHeight: 200,    overflow: "auto",    borderTop: "40px solid #388FCE",    position: "relative",  }, fieldLabel: {    transformOrigin: "0 0 ",    position: "absolute",    fontSize: "1rem",    textTransform: "uppercase",    letterSpacing: "3px",    top: 0,    left: 0,    color: "red",    fontWeight: "bold",  },我正在尝试将此 Attach PDF 标志移到边框内：我做错了什么所以标志还在里面而不是进入边界？

Answer 1

没有理由将该标题放入 material-uiList元素中并强制其进入边框。只需将 包装List在一个组件中，该组件在列表之前呈现标题：

const ListWithHeading = ({heading, classes, children, ...props}) => (

    <div className="list-container">

        <Typography className={classes.fieldLabel}>{heading}</Typography>

        <List classes={classes} {...props}>{children}</List>

    </div>

);

您可以给包含headinga 类的元素设置样式，例如给它背景颜色并使其全宽。

像这样渲染它：

<ListWithHeading heading="Attach PDF">

    {/* list items here */}

</ListWithHeading>

Answer 2

而不是试图弯曲空间和时间来向上移动文本 - 只需删除顶部边框 - 并使文本的高度和背景与内部布局相匹配。

我已经使用类躲过了你的元素 - 它很简单。并且没有空间或时间的弯曲:)

.root {

    width: 100%;

    max-width: 360px;

    border: 3px solid #388FCE;

    margin-left: 3%;

    max-height: 200px;

    overflow: auto;

    border-top: none;

    display: block;

  }

 .fieldLabel {

    height: 40px;

    line-height: 40px;

    background: #388FCE;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: red;

    font-weight: bold;

    display: block;

    padding-left: 10px

  }

<List class="root">

       <Typography class="fieldLabel">

        Attach PDF

       </Typography>

             {/***SOME CODE**/}

  </List>

Answer 3

我会建议你使用 ListSubheader 

  <List 

      className={classes.root} 

      subheader={

        <ListSubheader className={classes.subHeader} component="div">

          Attach PDF

        </ListSubheader>

      }>

          {/*** Your List Items**/}

  </List>

并为其添加样式。例如：

subHeader: {

  background: '#388FCE',

  // other required styles

}