如何在 React MUI Chip 组件上使用 `component` 属性？

Question

我想自定义 Material UI 芯片的标签，使其在同一标签中具有两种文本样式：粗体文本后跟常规文本。我从文档中看到 API 允许在 component 属性中指定一些内容来覆盖芯片的结构，但我找不到如何做到这一点的示例。那会是什么样子？

Answer 1

您实际上可以将自定义元素插入标签，因为标签是节点类型。

<Chip
  label={<div>Test<b>bold</b></div>}
  ...
/>

使用组件：

const Test = (children) => {
  return (
    <div>testing</div>
  )
}


<Chip 
  component={Test}
  ...
/>

How to use the `component` property on a React MUI Chip component?