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