我正在將 React 與 MUI 的庫一起使用。我使用的 MUI 組件是
芯片
在 this 中Chip，有 label 屬性，您可以在其中選擇在芯片中顯示文本欄位。像下面。
我一直在嘗試Chip使用假定的 MUI 全域樣式來覆寫“頭像”文本的樣式，例如：
label: {
'& .MuiChip-label': {
fontWeight: 'bold',
color: 'orange'
}
},
<Chip
avatar={<Avatar style={{
width: '32px', height: '32px', padding: '5px', border: '1px solid',
backgroundColor: 'black'
}}
className={classes.label}
src="/avatar/photo/pic.png" />}
label="Avatar"
variant="outlined" />
但這并不能解決問題。有沒有其他方法可以做到這一點？
uj5u.com熱心網友回復：
V5
方法 1：使用sxprop 設定嵌套組件的樣式。
V4
您需要將 label 組件定位在里面Chip，您可以通過為classes.labelprop提供一個類名來實作：
<Chip
classes={{
label: classes.label
}}
的labelpropChip是 aReactNode因此您還可以向 提供自定義標簽組件Chip：
<Chip
label={<div className={classes.label}>Deletable</div>}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328517.html
標籤：javascript css 反应 bootstrap-4 材质-ui
上一篇：如何讓文字最多顯示五行，并通過CSS或jquery完成折疊效果？
下一篇：如何在頂行的網格中插入新專案？