Material-UI芯片如何改變字體大小

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

Answer 2

您可以為芯片創建一個樣式類，然后通過子選擇器訪問標簽。

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

}));

Answer 3

完成薩布麗娜的回答

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"/>