Question

我的筹码可能包含很长的字符串，因此我想限制筹码的宽度，并在工具提示中显示全文。

但是，当我尝试更改maxWidth时，最终只会更改Chip的灰色，药丸状部分的宽度-标签继续溢出，并且“ delete”按钮也放错了位置，出现在芯片外部。

正常：

应用maxWidth之后：

我尝试使用内联样式= {{}}道具，并尝试使用“ withStyles”方法来创建自己的自定义样式的Chip，但是两者具有相同的效果。

我修改了Material-UI文档中的Chip示例以演示问题：https://codesandbox.io/s/material-demo-zt72h

编辑：如果我还要调整“溢出”样式，则几乎在其中，但我只看到字符串的中间的截断部分，没有省略号，并且删除按钮消失了：

  chip: {
    maxWidth: 100,
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }

Answer 1

您需要为label prop提供自定义实现（这只是一个示例，您可能需要对其进行修改以使其更适合您的情况）：

const CHIP_MAX_WIDTH =  100;
const CHIP_ICON_WIDTH = 30;

const EllipsisText = (props) => {
  const { children } = props

  return (
    <div style={{
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: CHIP_MAX_WIDTH - CHIP_ICON_WIDTH
      }}>
      {children}
    </div>
  )
}

而不是在Chip中使用它：

<Chip
   size="small"
   key={data.key}
   icon={icon}
   label={<EllipsisText>{data.label}</EllipsisText>}
   onDelete={data.label === "React" ? undefined : handleDelete(data)}
   className={classes.chip}
/>

Answer 2

您的问题即将达到文字长度。您可以使用substring（）搜索https://www.w3schools.com/jsref/jsref_substring.asp

轻松修复它

因此在demo.js上尝试第60行到label={data.label.substring(0, 10)}

Answer 3

你可以给它样式，如

style={{width: '15%', height:'10%',marginLeft: '1%', fontSize: '1.3rem'}}

Answer 4

我会使用css来解决此类问题，因为问题是芯片中的长文本。

喜欢：仍然需要抛光

label: {
    maxWidth: "100%",
    overflow: "hidden"
  }

片内组件

<Chip
  ...
    classes={{ label: classes.label }}
  ...
/>

Material-UI：如何指定芯片的maxWidth？

4 个答案: