How change the size of UI Chip dynamically

Question

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 components.

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>
  )
}

Answer 1

currently, Chip doesn't support the prop for size (Hope they support it in the future ?).
For this, you've to make your own custom component. I've created one name CustomChip.

In this, pass a prop named size, and the rest of the sizes of the chip scales accordingly.

CustomChip.js

function CustomChip(props) {
  const { size = 1, ...restProps } = props;
  const classes = useStyles({ size });

  return (
    <Chip
      className={classes.root}
      classes={{ avatar: classes.avatar, deleteIcon: classes.deleteIcon }}
      {...restProps}
    />
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    fontSize: (props) => `${props.size * 0.8125}rem`,
    height: (props) => `${props.size * 32}px`,
    borderRadius: "9999px"
  },
  avatar: {
    "&&": {
      height: (props) => `${props.size * 24}px`,
      width: (props) => `${props.size * 24}px`,
      fontSize: (props) => `${props.size * 0.75}rem`
    }
  },
  deleteIcon: {
    height: (props) => `${props.size * 22}px`,
    width: (props) => `${props.size * 22}px`,
    color: "green"
  }
}));

Here the provided size gets multiplied by the default sizes of the parts.

use:-

<CustomChip
    size={2}
    avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
    label="Deletable"
    onDelete={handleDelete}
/>

Working sandbox link:-

Answer 2

I solve my problem using style={{ fontSize: "1.2rem" }}:

                 <Chip
                    style={{ fontSize: "1.2rem" }}
                    icon={<FaceIcon />}
                    label={n.status}
                    variant="outlined"
                  />