在边框内移动文本答案

【问题标题】：Move text inside border在边框内移动文本
【发布时间】：2020-10-14 12:47:50
【问题描述】：

我正在尝试将文本移动到父元素的粗边框内。我正在使用 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",
  },

我正在尝试将此附加 PDF 标志移动到边框内：

我做错了什么，所以标志仍在内部而不是边界？

【问题讨论】：

不将其移入边框，而是将文本的背景设置为与边框的颜色相匹配，并使其跨越父级的宽度
或者，您可以将顶部值设置为负数。
@YannickEich 标志正在隐藏在边界后面。
@szczocik 如果没有其他解决方案，我不会拒绝这个想法
这不是边框的使用方法。而是使用像 div 这样的容器元素，将其颜色作为背景色，并将其放在框的顶部。

标签： javascript html css reactjs material-ui

【解决方案1】：

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

const ListWithHeading = ({heading, classes, children, ...props}) => (
    <div className="list-container">
        <Typography className={classes.fieldLabel}>{heading}</Typography>
        <List classes={classes} {...props}>{children}</List>
    </div>
);

你可以给包含heading的元素一个类来设置它的样式，例如给它一个背景颜色并使其全宽。

这样渲染：

<ListWithHeading heading="Attach PDF">
    {/* list items here */}
</ListWithHeading>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我会建议你使用 ListSubheader https://material-ui.com/api/list-subheader/

   <List 
      className={classes.root} 
      subheader={
        <ListSubheader className={classes.subHeader} component="div">
          Attach PDF
        </ListSubheader>
      }>
          {/*** Your List Items**/}
  </List>

并且为其添加样式。例如：

subHeader: {
  background: '#388FCE',
  // other required styles
}

【讨论】：