如何覆盖 MUI 芯片中的标签样式
How to override the label styles in MUI's Chip
我正在使用 React 和 MUI 的库。我使用的 MUI 组件是
Chip
并且在这个 Chip
中,有一个标签属性,您可以在其中选择在芯片中显示一个文本字段。如下所示。
我一直在尝试使用假定的 MUI 全局样式覆盖 Chip
中“头像”文本的样式,例如:
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
方法 1:使用 sx
属性来设置嵌套组件的样式。查看全局列表 CSS class 名称 here.
<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
属性提供 class 名称来实现:
<Chip
classes={{
label: classes.label
}}
Chip
的 label
属性是一个 ReactNode
所以你也可以为 Chip
提供自定义标签组件:
<Chip
label={<div className={classes.label}>Deletable</div>}
我正在使用 React 和 MUI 的库。我使用的 MUI 组件是
Chip
并且在这个 Chip
中,有一个标签属性,您可以在其中选择在芯片中显示一个文本字段。如下所示。
我一直在尝试使用假定的 MUI 全局样式覆盖 Chip
中“头像”文本的样式,例如:
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
方法 1:使用 sx
属性来设置嵌套组件的样式。查看全局列表 CSS class 名称 here.
<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
属性提供 class 名称来实现:
<Chip
classes={{
label: classes.label
}}
Chip
的 label
属性是一个 ReactNode
所以你也可以为 Chip
提供自定义标签组件:
<Chip
label={<div className={classes.label}>Deletable</div>}