2.x-migration-guide.mdx

title	description	navigation	github	prev	next
Material Tailwind Migration Guide - React & Tailwind CSS Components Library	Learn how to migrate to @material-tailwind/react@2.0.0.	alert chip avatar	2.x-migration-guide	what-is-tailwind-css	theming

2.x Migration Guide

Material Tailwind React 2.0 introduces a number of breaking changes, We tried keeping the amount of breaking changes to a minimum.

Breaking Changes

The following changes are made to the components for a better developer experience.

### Alert **1.** The show prop renamed to open.

// ❌ The `show` prop won't work anymore
<Alert show={true}>
  A dismissible alert for showing message.
</Alert>

// ✅ Use `open` prop instead.
<Alert open={true}>
  A dismissible alert for showing message.
</Alert>

2. The dismissible prop replaced with onClose and action props.

// ❌ The `dismissible` prop won't work anymore and it's separated to `onClose` and `action` props.
<Alert
  dismissible={{
    onClose: () => {},
    action: <i className="fa fas-xmark" />,
  }}
>
  A dismissible alert for showing message.
</Alert>

// ✅ Use `onClose` and `action` props instead.
<Alert
  onClose={() => {}}
  action={<i className="fa fas-xmark" />}
>
  A dismissible alert for showing message.
</Alert>

For more details check the Alert Props page.

---

### Chip **1.** The show prop renamed to open.

// ❌ The `show` prop won't work anymore
<Chip show={true} value="React" />

// ✅ Use `open` prop instead.
<Chip open={true} value="React" />

2. The dismissible prop replaced with onClose and action props.

// ❌ The `dismissible` prop won't work anymore and it's separated to `onClose` and `action` props.
<Chip
  value="React"
  dismissible={{
    onClose: () => {},
    action: <i className="fa fas-xmark" />,
  }}
/>

// ✅ Use `onClose` and `action` props instead.
<Chip
  value="React"
  onClose={() => {}}
  action={<i className="fa fas-xmark" />}
/>

For more details check the Chip Props page.

---

### Avatar The default value for variant prop changed from rounded to circular and the {``} will be circular by default, you can still use the rounded value, check the example below:

<Avatar src="..." alt="..." variant="rounded" />

For more details check the Avatar Props page.