如何调整Materialize Chip组件尺寸？修改CSS致圆角变形

我之前调整Materialize Chips大小的时候也碰到过这个圆角变形的坑，其实是因为默认的Chip样式把圆角和元素的高度绑定了，直接硬改宽高会破坏这个比例。给你几个靠谱的解决方法：

方法1：用transform缩放（最简单快捷） #

如果不想动太多CSS代码，直接用transform: scale()来缩放整个Chip，这样圆角、内部元素的比例都会自动保持一致，不会变形：

.custom-chip {
  transform: scale(0.8); /* 0.8是缩放比例，按需调整大小 */
  transform-origin: center center; /* 保持Chip居中缩放 */
}

这种方法完全不会破坏原有的布局和圆角形态，适合快速调整Chip尺寸的场景。

方法2：同步修改所有关联CSS属性 #

要是你需要精确控制Chip的尺寸，就得把Chip的height、line-height、border-radius、内部字体大小这些属性一起调整，保持比例统一：

.custom-chip {
  height: 28px; /* 自定义的Chip高度 */
  line-height: 28px; /* 和高度一致，保证文字垂直居中 */
  border-radius: 14px; /* 必须是高度的一半，才能保持正常圆角 */
  font-size: 12px; /* 同步缩小字体，避免文字溢出 */
  padding: 0 12px; /* 按需调整左右内边距，保持空间协调 */
}
/* 如果是带删除按钮的Chip，还要同步调整按钮的尺寸 */
.custom-chip .close {
  height: 20px;
  width: 20px;
  line-height: 20px;
  margin-left: 8px;
}

这里的核心是border-radius必须设置为高度的一半，这样才能维持原本的椭圆圆角形态，不会变成扁塌的圆角。

方法3：覆盖Materialize的Sass变量（适合全局统一调整） #

如果你的项目用了Sass预编译，可以直接修改Materialize内置的Chip变量，这样所有Chip都会自动适配新尺寸，不用额外写自定义CSS：

$chip-height: 28px;
$chip-border-radius: $chip-height / 2;
$chip-font-size: 12px;
// 还可以按需修改$chip-padding、$chip-close-size等其他关联变量

重新编译Sass后，就能得到完全符合你需求的Chip，从根源上避免圆角变形的问题。

最后提醒一句：别单独只改height或者width这类属性，一定要同步调整border-radius和其他关联样式，不然肯定会出现圆角比例失调的情况！

内容的提问来源于stack exchange，提问作者Atul