使用 MUI 动态绘制多个边框

Question

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

Here's a working sandbox 为一个边框。非常感谢有关如何支持多边界的任何帮助。

Answer 1

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

使用 MUI 动态绘制多个边框

Dynamically drawing multiple borders with MUI

css

reactjs

material-ui