How to set the card height with React Material UI?

Sometimes, we want to set the card height with React Material UI.

In this article, we’ll look at how to set the card height with React Material UI.

How to set the card height with React Material UI?

To set the card height with React Material UI, we can set the style prop of the Card.

For instance, we write:

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";

const cardStyle = {
  display: "block",
  transitionDuration: "0.3s",
  height: "45vw"
};

export default function App() {
  return (
    <div>
      <Card style={cardStyle}>
        <CardHeader
          title="URL Avatar"
          subtitle="Subtitle"
          avatar="https://placeimg.com/800/450/nature"
        />
      </Card>
    </div>
  );
}

to set the style prop of the Card to an object that has the height of the card.

As a result, the card height should be set to 45vw.

Conclusion

To set the card height with React Material UI, we can set the style prop of the Card.