CODEWITHSUNDEEP
reactjsmaterial-ui
adam0101
adam0101

Reputation: 30995

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

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?

Upvotes: 3

Views: 2080

Answers (1)

fmsthird
fmsthird

Reputation: 1875

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}
  ...
/>

Upvotes: 2

Related Questions