如何更改Material-UI的Chip字体大小

Question

我有Chipwidget

const styles = {
root:{
},
chip:{
margin: "2px",
padding: "2px"
}
}
const SmartTagChip = (props) =>{
const classes = useStyles();
return(  
<Chip style={{color:"white"}} clickable className={classes.chip}
color="default" 
label={item.label} variant="outlined"/>:
)
}

我想把字体调大一点。

所以我尝试但徒劳。

<Chip style={{color:"white"}} clickable className={classes.chip}

我正在阅读https://material-ui.com/api/chip/文件

，找到了一些关于CSS的信息

root    .MuiChip-root   Styles applied to the root element.

我想我应该自定义.MuiChip-root类，虽然，

我该怎么做?

Answer 1

你可以使用Material-ui的内置解决方案withStyles。它允许简单地对组件应用样式。在你的例子中，它看起来像这样:

const StyledChip = withStyles({
root: {
backgroundColor: 'red'// here you can do anything actually 
},
label: {
textTransform: 'capitalize',
},
})(Chip);
const SmartTagChip = (props) =>{
const classes = useStyles();
return(  
<StyledChip clickable
color="default" 
label={item.label} variant="outlined"/>:
)
}

Answer 2

您可以为芯片创建一个样式类，然后通过子选择器访问标签。

export const useStyles = makeStyles(() => ({

myClassName: {
borderRadius: '9px', //some style
'& .MuiChip-label': { fontSize: 18 }, // sub-selector
},
}));

Answer 3

完成Sabrina的回答

import {makeStyles} from "@mui/styles";

const useStyles = makeStyles(() => ({
chipCustom: {
borderRadius: '9px', //some style
'& .MuiChip-label': {fontSize: 18}, // sub-selector
},
}));

const customChipClass = useStyles();

<Chip className={customChipClass.chipCustom} label="Test"/>