Menu
I'm trying to create a card element that does NOT span the entire width of the container it is in.
The Example seems to be able to do it fine
But when I attempt to use the example code, my card stretches the whole width of the page.
https://codesandbox.io/s/074zmkx0
758
Paper component is mostly background of an application resembles the flat, opaque texture of a sheet of paper, and an application's behavior mimics paper's ability to be re-sized, shuffled, and bound together in multiple sheets. The Card is are surfaces that display content and actions on a single topic.
To set a background color on Material UI's Paper, you simply need to apply the background-color CSS property to the root element of the Paper. Setting the styles on the root element of any Material UI component can be done in multiple ways, but the most common is to use the useStyles hook.
> Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI implements Material UI by default and this is the main reason why it's hard to customize.
Hi when I ran your example it also spans the entire page, but this is an easy fix. Within your Style.css you can add a css selector to change your Card component's display to be inline-block.
Style.css
/* Card component */
#root > div > div {
display: inline-block;
}
if you want to apply the inline-block solution, a clean way is to wrap the card inside a box
<Box display="inline-block">
<Card...
</Box>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
