Dynamically drawing multiple borders with MUI-CodePudding

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.

CodePudding user response：

This should help for 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>
      );
    }