Dynamically drawing multiple borders with MUI - css

Question

I am using React 17 and MUI 5.6. I have a component that needs to add new borders to the parent container based on user input. I found some non-MUI CSS tutorials for achieving what I want, but their borders are statically coded in CSS and not added on user demand.
Here's a working sandbox for one border. Would appreciate any help on how to support multiple borders.

Answer 1

This should help to solve your problem. Here is the working code, user can decide color with buttons but you can implement same solution also with dropdown options. https://codesandbox.io/embed/wonderful-worker-g8fzyi?fontsize=14&hidenavigation=1&theme=dark
import { Box } from "#mui/material";
import Button from "#mui/material/Button";
import { useState } from "react";
import "./styles.css";
export default function App() {
const [colors, setColors] = useState([]);
const [pixel, setPixel] = useState(6);
const addColor = async (color) => {
setPixel(pixel + 2);
let randomColor = `0 0 0 ${pixel}px ${color}`;
setColors([...colors, randomColor]);
};
return (
<div
style={{
width: "100vw",
height: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
>
<Box
sx={{
width: "50%",
height: "20%",
border: 3,
boxShadow: colors.join(",")
}}
></Box>
<div style={{ marginTop: 100 }}>
<Button onClick={() => addColor("#FFFF00")}>Yellow</Button>
<Button onClick={() => addColor("#FF002B")}>Red</Button>
<Button onClick={() => addColor("#0000FF")}>Blue</Button>
<Button onClick={() => addColor("#2BFF00")}>Green</Button>
</div>
</div>
);
}