'how to set the border color to Card component in React material ui

how to set the border color to Card component in React material ui .I have tried style property

style={{borderColor:"red"}} in code but it won't work. Is there any Solution?

reactjsjavatypes


Solution 1:[1]

What you're doing works, the problem is that you can't see a border without width nor style (solid, dashed, etc).

Try using style={{ border: "1px solid red" }}

Solution 2:[2]

You should use the borderColor prop on it like this:

<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

And the border size with the border prop like this:

<Box border={0}>…

See full API here: https://material-ui.com/system/borders/

Solution 3:[3]

You can use the border CSS property on the Card component to set the color.

<Card sx={{ border: '1px solid red' }}>
  <Typography variant='body1'>This has red borders</Typography>
</Card>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alec
Solution 2
Solution 3 DexterW

Related Questions