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

trigger an onChange event when initializing the value

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Getting Started with Material UI's Default Components

The CSS class is specifically assigned to a single element

Dark Mode in Next.js - Struggling to maintain the dark theme on page reloads as it keeps reverting to light mode

Display different screens depending on whether the user is authenticated in React Native

Implementing server-side API calls in REACT

Is it possible to use React hooks to set state with a string that includes HTML elements?

Ensure that the main div remains centered on the page even when the window size is adjusted

What is the best way to implement a 'TextField' in Flutter with the Label positioned inside the TextField's border?

Ensuring the same height for the navigation bar and logo with aligned vertical text

Blending React Router and Redux resulted in my redirection coming to a halt

next-pwa is failing to generate service worker files

What sort of JavaScript WYSIWYG text editor provides formula support?

Set the class of an element dynamically using ng-class and detect changes with ng-change

When Webpack presets are utilized, class properties undergo a transformation

The node and npm versions are identical, yet the package.lock file differs

Why are Chakra UI components not responsive to small screen sizes?

Issue with Express server routing: only the home route is functional and other routes are inaccessible

The CSS background cannot be blurred