v2 Migration Guide

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

Below is a list of breaking changes and how to migrate your code to the new version.

Alert

The following changes are made to the <Alert /> component:

Show Prop

The show prop replaced with 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>
// ❌ 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>

Dismissible Prop

The dismissible prop replaced with onClose and action props.

// ❌ The `dismissible` prop won't work anymore and replaced with `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>
// ❌ The `dismissible` prop won't work anymore and replaced with `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>

Chip

The following changes are made to the <Chip /> component:

Show Prop

The show prop replaced with open.

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

Dismissible Prop

The dismissible prop replaced with onClose and action props.

// ❌ The `dismissible` prop won't work anymore and replaced with `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" />}
/>
// ❌ The `dismissible` prop won't work anymore and replaced with `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" />}
/>

Avatar

The default value for variant prop changed from rounded to circular and the <Avatar /> will be circular by default, but you can still use the rounded value.