CODEWITHSUNDEEP
material-ui
Bar .W
Bar .W

Reputation: 143

How to replace Hidden component in Material-ui V5

I have some Hidden components below:

<Hidden smUp>
  ...
</Hidden>

<Hidden xsDown>
  ...
</Hidden>

It's deprecated in V5. So how can I use Paper & Box components as in the migration documents?

Sorry but it's quite difficult to follow the guide.

Upvotes: 1

Views: 2529

Answers (1)

yun_jay
yun_jay

Reputation: 1180

In the Migration from v4 documentation, this is actually pretty good explained.

You have to replace

<Hidden smUp>
  ...
<Hidden/>

with

<Paper sx={{ display: { xs: "block", sm: "none" } }}>
  ...
</Paper>
// or
<Box sx={{ display: { xs: "block", sm: "none" } }}>
  ...
</Box>

and

<Hidden xsDown>
  ...
</Hidden>

with

<Paper sx={{ display: { xs: "none", sm: "block" } }}>
  ...
</Paper>
// or
<Box sx={{ display: { xs: "none", sm: "block" } }}>
  ...
</Box>

Live demo:

Edit mystifying-bouman-c788k

Upvotes: 4

Related Questions