Css 使用 MUI 动态绘制多个边框

发布于05月09日

我使用的是React 17和MUI 5.6.我有一个组件，需要根据用户输入向父容器添加新边框.我找到了一些非MUI CSS tutorials来实现我想要的功能，但它们的边框是用CSS静态编码的，不是根据用户需求添加的.

一个边界Here's a working sandbox美元.如果您能在如何支持多个边界方面提供帮助，我们将不胜感激.

推荐答案

这应该有助于解决你的问题.这是工作代码，用户可以用按钮决定 colored颜色，但也可以用下拉选项实现相同的解决方案.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>
      );
    }