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

Question

I want to customize the label of a Material UI chip to have two text styles in the same label: bold text followed by regular text. I see from the docs that the API allows specifying something in the component property to override the structure of the chip, but I can't find an example of how to do that. What would that look like?

Answer 1

You can actually insert custom element to the label as label is type of node.

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

Using component:

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


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