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

Question

我有Chip小部件

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"/>:
  )
}