首頁猿問將文本移動到邊框內

將文本移動到邊框內

JavaScript

www說 2023-05-11 16:22:49

我正在嘗試將文本移動到父元素的粗邊框內。我正在使用 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 標志移到邊框內：我做錯了什么所以標志還在里面而不是進入邊界？

查看完整描述

3 回答

天涯盡頭無女友

TA貢獻1831條經驗獲得超9個贊

沒有理由將該標題放入 material-uiList元素中并強制其進入邊框。只需將包裝List在一個組件中，該組件在列表之前呈現標題：

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

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

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

</div>

);

您可以給包含headinga 類的元素設置樣式，例如給它背景顏色并使其全寬。

像這樣渲染它：

{/* list items here */}

</ListWithHeading>

反對回復 2023-05-11

qq_遁去的一_1

TA貢獻1725條經驗獲得超8個贊

而不是試圖彎曲空間和時間來向上移動文本 - 只需刪除頂部邊框 - 并使文本的高度和背景與內部布局相匹配。

我已經使用類躲過了你的元素 - 它很簡單。并且沒有空間或時間的彎曲:)

.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

}

Attach PDF

</Typography>

{/***SOME CODE**/}

</List>

反對回復 2023-05-11

RISEBY

TA貢獻1856條經驗獲得超5個贊

我會建議你使用 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

}

反對回復 2023-05-11

3 回答
0 關注
193 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將文本移動到邊框內

將文本移動到邊框內

3 回答

添加回答