Ant Design v4 Card Style boxShadow

Question

I want to change the card style:

boxShadow: [0, 8, 24, rgba(208, 216, 243, 0.6)]

---

However, it shows warning as rgba is not defined.

How can I assign styles to boxShadow, it got more properties than other CSS items.

boxShadow got both shadow border and rgba color.

---

Card style={ width: 360, height: 192, borderRadius: 16, marginRight: 24, boxShadow: [0, 8, 24, rgba(208, 216, 243, 0.6)] }

Answer 1

The values of your style props need to be strings and have "px" appended to them. This will work:

const cardStyle = { 
    width: "360px", 
    height: "192px", 
    borderRadius: "16px", 
    marginRight: "24px", 
    boxShadow: "5px 8px 24px 5px rgba(208, 216, 243, 0.6)" 
 }