How to remove Card box shadow that act as border #450
Replies: 3 comments 6 replies
-
What if you use |
Beta Was this translation helpful? Give feedback.
-
@thewebartisan7 what you did makes sense to me, changes to most variables are usually going to be documented in the changelog. Why do you need to use the Card though? If you can get away with the Box and some padding, I'd just go with equivalent negative margin on the Table to achieve what Inset achieves. |
Beta Was this translation helpful? Give feedback.
-
I don't need to use the For example below with <Box px="6" my="6">
<Heading as="h2" size="6" mb="5">
Users
</Heading>
<Table.Root mx="-6">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>ID</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.RowHeaderCell width="150px">1</Table.RowHeaderCell>
<Table.Cell>John</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Box> |
Beta Was this translation helpful? Give feedback.
-
Below is the code of a
Card
that has aTable
, and I am usingInset
to remove left/right space forTable
.The only problem is that the default
Card
box shadow can't be easily removed, and with variant ghost also all padding is lost andInset
doesn't works properly.The only workaround was to remove the box shadow via inline style, and it was pretty hard to find this variable that act as border.
I tried with a
Box
butInset
withBox
doesn't seems to works fine. I want theTable
to start from edge of screen but has inner padding, something like in your demo where there isTable
insideDialog
.Code with workaround:
Is there a better way?
Thanks
Beta Was this translation helpful? Give feedback.
All reactions