Creating a dynamic and unique border design in MUI

Question

Creating a dynamic and unique border design in MUI

Currently, I am working with React 17 and MUI version 5.6. My component requires the ability to dynamically add new borders to the parent container based on user input. While I have come across CSS tutorials that demonstrate how to achieve this effect using non-MUI techniques, these resources only provide solutions with statically coded borders rather than ones that can be added upon user demand.

If you'd like to see an example of a working sandbox for adding a single border, feel free to check out this link. Any assistance or guidance on implementing support for multiple borders would be greatly appreciated.

css reactjs material-ui

Answer 1

Answer №1

If you are facing an issue, this solution may help. Here is the functional code that allows the user to choose colors using buttons, although you can also achieve the same outcome with dropdown menus. View the code here

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

Answer 2

If you are facing an issue, this solution may help. Here is the functional code that allows the user to choose colors using buttons, although you can also achieve the same outcome with dropdown menus. View the code here

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

Creating a dynamic and unique border design in MUI

Answer №1

Similar questions

Why is it that lists always begin outside of the enclosing element?

Enhance your UI experience with a beautifully styled button using Material-

Numerous div elements are situated closely together, featuring small pockets of blank spaces in between each

Validation of OpenAPI requests on the client-side using React libraries

Arrangement of elements in Bootstrap

Using @font-face to apply a font on an SVG file is not supported

useEffect initiates all actions

What are some ways to conduct testing for styled components?

React Warning: Every child component within a list must contain a distinct key property

Troubleshooting a Label Overlapping Problem in Materialize CSS

Designing a collection of inline divs that automatically stretch to fit the parent container, while also wrapping to a new line if the minimum width is reached

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Controlling the Alignment of HTML Div Elements

Whenever I try to run the npm run dev function on my Ubuntu operating system, I always

Using PHP's modulus operator, you can dynamically apply CSS classes to a grid of images based on alternating patterns

Have you ever created a CSS class that you've had to reuse multiple times?

A comprehensive guide on associating a JavaScript function with an element attribute

Personalized jQuery Slider with automatic sliding

JavaScript failing to load following PHP header() redirect

The combination of TypeScript 2.6 and material-ui 1.0.0-beta.24's withStyles with react-router withRouter is resulting in the error message: "Property 'classes' is missing in type."