CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
deekshitha k
deekshitha k

Reputation: 89

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?

Upvotes: 6

Views: 12624

Answers (4)

ahmad chitsazzadeh
ahmad chitsazzadeh

Reputation: 1

just it:

<Card sx={{ borderColor: 'red' }}>
  <Typography variant='body2'>This has red borders</Typography>
</Card>

Upvotes: 0

Alec
Alec

Reputation: 9575

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" }}

Upvotes: 8

Dexter
Dexter

Reputation: 5736

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>

Upvotes: 0

Nitsan Cohen
Nitsan Cohen

Reputation: 707

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/

Upvotes: 1

Related Questions