One helpful tip for adjusting the size of a UI chip on the fly

Question

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS.

My objective is to achieve something like this:

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

The issue I'm encountering: The chip element in material-ui does not seem to be easily resizable compared to other components in material-UI.

Attempts made:

style={{transform:'scale(1em)'}} was tried but it did not yield the desired outcome. The anchor point for the transform operation was difficult to manage.
Another approach involved creating a custom chip with
```
<img style={{float: 'left', width: '1em', borderRadius: '50%',}}/>
```
. However, this solution lacked the original appearance of 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

Answer 1

Answer №1

At the moment, the Chip component does not have built-in support for adjusting size (We hope this feature will be added in the future 🤞).
To work around this, you can create your own custom component. I've developed one called CustomChip.

Within this custom component, include a prop called size to adjust the chip's dimensions 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"
  }
}));

This custom component adjusts its size based on the provided input.

Example of how to use it:-

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

Check out the working demo on Codesandbox:

https://codesandbox.io/s/crazy-blackwell-987it?fontsize=14&hidenavigation=1&theme=dark

Answer 2

At the moment, the Chip component does not have built-in support for adjusting size (We hope this feature will be added in the future 🤞).
To work around this, you can create your own custom component. I've developed one called CustomChip.

Within this custom component, include a prop called size to adjust the chip's dimensions 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"
  }
}));

This custom component adjusts its size based on the provided input.

Example of how to use it:-

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

Check out the working demo on Codesandbox:

https://codesandbox.io/s/crazy-blackwell-987it?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

As a result of the deprecation of makeStyles() in version 5, it is advisable to opt for a more up-to-date styling solution like sx or styled.

Here is an illustration using a 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;

Answer 4

As a result of the deprecation of makeStyles() in version 5, it is advisable to opt for a more up-to-date styling solution like sx or styled.

Here is an illustration using a 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;

One helpful tip for adjusting the size of a UI chip on the fly

Answer №1

CustomChip.js

Answer №2

Similar questions

Develop a cutting-edge application using React, Node, and deploy it seamlessly

Displaying text on an image when hovering over it

Attempting to align three sections horizontally

What is the process for setting up a webpack alias for React and React-DOM in Next.js?

Assistance with Parallax Mouse Movement, Using JQuery, HTML, and CSS

"Converting a text into a property that can be

Utilize JavaScript declarations on dynamically added strings during Ajax loading

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

What is the method to ensure background images are loaded with SSL from a different domain?

Transmit JavaScript code from ASP.NET

Key press event not firing as expected

I am seeing an empty dynamic HTML table

Avoid the problem of animations triggering twice when clicking

Error: cannot use .json data with `filter` method from WEBPACK_IMPORTED_MODULE_2__["filter"]

The map fails to load on the HTML page

Tips for integrating a back button functionality with AJAX requests

Incorporate multiple array values within an if statement

The most efficient method for documenting $.trigger in JavaScript/jQuery is through the use of JSD

Is it recommended to have react and react-dom listed as devDependencies in the package.json file?