In the following example, I am trying to change the size the UI chip in dynamically in order to respond to the font size of its parents using the em css unit.

My goal: I want to do something like this

style={{size:'1em'}}

My problem: the chip element in material-ui is not resizable like most of the material-UI ponents.

I tried:

1. style={{transform:'scale(1em)'}} but it did not work at all. I don't know how to change the anchor point of transform.
2. I also tried to create my own chip with <img style={{float: 'left', width: '1em', borderRadius: '50%',}}/> but it does not look original as the material UI chip.

import Avatar from '@material-ui/core/Avatar'
import Chip from '@material-ui/core/Chip'

function Chips() {
  const classes = useStyles()

  const handleDelete = () => {
    console.info('You clicked the delete icon.')
  }

  const handleClick = () => {
    console.info('You clicked the Chip.')
  }

  return (
    <div className={classes.root}>
      <h1>
        <Chip
          //style={{size:'1em'}}
          avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
          label="Deletable"
          onDelete={handleDelete}
        />
      </h1>

      <h4>
        <Chip
          //style={{size:'1em'}}
          avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
          label="Deletable"
          onDelete={handleDelete}
        />
      </h4>
    </div>
  )
}

In the following example, I am trying to change the size the UI chip in dynamically in order to respond to the font size of its parents using the em css unit.

My goal: I want to do something like this

style={{size:'1em'}}

My problem: the chip element in material-ui is not resizable like most of the material-UI ponents.

I tried:

1. style={{transform:'scale(1em)'}} but it did not work at all. I don't know how to change the anchor point of transform.
2. I also tried to create my own chip with <img style={{float: 'left', width: '1em', borderRadius: '50%',}}/> but it does not look original as the material UI chip.

import Avatar from '@material-ui/core/Avatar'
import Chip from '@material-ui/core/Chip'

function Chips() {
  const classes = useStyles()

  const handleDelete = () => {
    console.info('You clicked the delete icon.')
  }

  const handleClick = () => {
    console.info('You clicked the Chip.')
  }

  return (
    <div className={classes.root}>
      <h1>
        <Chip
          //style={{size:'1em'}}
          avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
          label="Deletable"
          onDelete={handleDelete}
        />
      </h1>

      <h4>
        <Chip
          //style={{size:'1em'}}
          avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
          label="Deletable"
          onDelete={handleDelete}
        />
      </h4>
    </div>
  )
}

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow edited Oct 27, 2023 at 3:23 Rajiv 3,77222 gold badges1717 silver badges3232 bronze badges asked Apr 3, 2021 at 8:56 Ali HushamAli Husham 9361515 silver badges3737 bronze badges 1

• See Chip API - CSS Material UI – Shivam Jha Commented Apr 3, 2021 at 10:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Due to makeStyles() deprecation in the v5, it is remended to use a newer styling solution sx or styled.

Example with custom ponent and sx:

import React from 'react';

import { ChipProps } from '@mui/material/Chip/Chip';
import { Chip } from '@mui/material';

type ChipAtomProps = ChipProps & {
  scale?: number;
};

const ChipAtom: React.FC<ChipAtomProps> = ({
  id,
  className,
  variant,
  scale = 1,
  avatar,
  label,
}) => {
  const scaledChipSx = {
    height: `${scale * 32}px`,
    borderRadius: `${scale * 16}px`,
    '& .MuiChip-label': {
      paddingRight: `${scale * 12}px`,
      paddingLeft: `${scale * 12}px`,
      fontSize: `${scale * 0.8125}rem`,
    },
    '& .MuiChip-avatar': {
      width: `${scale * 24}px`,
      height: `${scale * 24}px`,
      fontSize: `${scale * 0.75}rem`,
    },
  };

  return (
    <Chip
      id={id}
      className={className}
      variant={variant}
      avatar={avatar}
      label={label}
      sx={scaledChipSx}
    />
  );
};

export default ChipAtom;

This answer is valid for MUI v4

currently, Chip doesn't support the prop for size (Hope they support it in the future