How change the size of UI Chip dynamically - html

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:
style={{transform:'scale(1em)'}} but it did not work at all. I don't know how to change the anchor point of transform.
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:-