我正在将 React 与 MUI 库一起使用。我使用的 MUI 组件是
Chip
而在这个Chip
,有标签属性,您可以选择在芯片中显示文本字段。就像下面这样。
我一直在尝试覆盖“阿凡达”文本的样式,在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" />
但这并不能解决问题。还有其他方法可以实现此目的吗?
V5
方法一: Use sx
用于设置嵌套组件样式的 prop。查看全局 CSS 类名列表here https://mui.com/api/chip/#css.
<Chip
label="Chip Filled"
variant="outlined"
sx={{
"& .MuiChip-label": {
color: "red"
}
}}
/>
方法2:传递一个样式标签:
<Chip
label={<Box sx={{ color: "blue" }}>Chip Filled</Box>}
variant="outlined"
/>
V4
你需要定位里面的标签组件Chip
,您可以通过向classes.label
prop:
<Chip
classes={{
label: classes.label
}}
The label
的支柱Chip
is a ReactNode
因此您还可以向Chip
:
<Chip
label={<div className={classes.label}>Deletable</div>}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)