在纸片边框中添加文本 Material UI

Question

我需要使用使用 MaterialUI 预构建的 Chip 组件来创建此样式

使用 html 和 css 解决方案将使用一些文本

但即使在那里结果也不一样，我看到一些例子用 material 实现了相同但使用带有 Chip 装饰的 TextField 但它不一样。

Answer 1

如果你真的想使用 <Chip> 组件，你可以在 Chip 样式上使用 &::before。

例如：

const Chip = styled(MuiChip)(({ chipTitle }) => ({
  "&::before": {
    content: `"${chipTitle}"`,
    position: "absolute",
    top: "-8px",
    left: "16px",
    backgroundColor: "#fff",
    padding: "0 8px"
  }
}));

并将其用作：

<Chip
  label="Salary Proposal - 500k$"
  variant="outlined"
  onDelete={handleDelete}
  chipTitle="Hello"
/>

查看 this CodeSandbox。当然，个人风格可能会有一些差异，但请根据需要进行更新。

如果您使用的是 Typescript:
您需要先创建扩展默认 ChipProps.
的类型例如：

import {styled, Chip as MuiChip, ChipProps as MuiChipProps} from '@mui/material'

interface ChipProps extends MuiChipProps {
    chipTitle: string
}

之后，修改styled()如下：

const Chip = styled(MuiChip)<ChipProps>(({ chipTitle }) => ({
  "&::before": {
    content: `"${chipTitle}"`,
    position: "absolute",
    top: "-8px",
    left: "16px",
    backgroundColor: "#fff",
    padding: "0 8px"
  }
}));

在纸片边框中添加文本 Material UI

Add text in border of a chip Material UI

css

reactjs

material-ui