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.
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>
);
}