CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Ali Husham
Ali Husham

Reputation: 936

How change the size of UI Chip dynamically

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

Upvotes: 3

Views: 8280

Answers (2)

Rajiv
Rajiv

Reputation: 3772

This answer is valid for MUI v4

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:-

Edit crazy-blackwell-987it

Upvotes: 2

Michael Linker
Michael Linker

Reputation: 337

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

Example with custom component 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;

Upvotes: 3

Related Questions