ChipofMaterial-UIのフォントサイズを変更する方法

受付中プログラミング

2024-12-24

masato

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クラスをカスタマイズする必要があると思いますが、これどうやってするの？

回答一覧

CSSプロパティの最後にフラグとして！importantとともにカスタムCSSを使用してみてください。それは最高のCSS特異性を持っています。

masato

withStylesと呼ばれるMaterial-uiの組み込みソリューションを使用できます。コンポーネントにスタイルを簡単に適用できます。あなたの場合、それは次のようになります


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

masato

チップのスタイルクラスを作成してから、サブセレクターを介してラベルにアクセスできます。


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

masato

ログインして回答する