https://i.sstatic.net/Nlxrr.jpg
This is a design I am experimenting with for the poly button above. I have tried various styling methods. Does anyone have any ideas?
https://i.sstatic.net/Nlxrr.jpg
This is a design I am experimenting with for the poly button above. I have tried various styling methods. Does anyone have any ideas?
To achieve this effect, one option would be to create a CSS clip path for the polygon shape within the Button component using either the sx prop or by creating a styled component and passing it as the component prop in Material-UI.
Example using a styled component:
In the example provided, a basic star shape is used as a placeholder since the specific polygon shape is not available.
const StarButton = styled("button")({
width: "300px",
height: "300px",
background: "linear-gradient(red, orange)",
clipPath:
"polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%)",
shapeOutside:
"polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%)"
});
const MyStarButtonComponent = () => {
return (
<Button
component={StarButton}
variant="contained"
>
MUI Button
</Button>
)
}
This approach will render a button with the appearance of a polygon shape.
Example using sx prop:
<Button
variant="contained"
sx={{
width: "300px",
height: "300px",
background: "linear-gradient(red, orange)",
clipPath: "polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%)",
shapeOutside: "polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%)"
}}
>
MUI Button via sx
</Button>
Bonus Tip: In the example, the shapeOutside property is added to allow other elements on the page to flow around the button, although this is optional:
View Working CodeSandbox: https://codesandbox.io/s/...s-...
Note: Another technique involves defining the clipPath using an SVG element on the page and referencing it in the CSS by ID without converting the points, but this method may limit the ability to use the shapeOutside property:
<svg
style={{
position: "absolute",
width: 0,
height: 0
}}
>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0.5,0,0.638,0.354,1,0.382,0.723,0.629,0.809,1,0.5,0.799,0.191,..."></path>
</clipPath>
</svg>
<Button
variant="contained"
sx={{ clipPath: "url(#my-clip-path)" }}
>
MUI Button via sx/SVG
</Button>
I have been searching for ReactJs guides, but most of them are based in ES5. As a result, I have begun using ReactJS in this manner. Now that I understand how to create all my components, I am ready to build a small single-page-application. However, I am s ...
Objective: I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links. When the cursor moves to a new td row, the previous row should return to its default state a ...
I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...
I am working on integrating Spotify authentication using the implicit grant method as outlined in their documentation. I have implemented the relevant code into a React component and successfully logged into Spotify. However, I am facing an issue where the ...
I'm currently following the Stripe documentation to set up Connect in my React application. After adding my endpoint URI, when the user completes providing the required information, Stripe redirects them back to my specified redirect_uri with an auth ...
I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...
I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...
I've been facing some issues with this code and have resorted to debugging it using console.log(). However, the results I'm getting are not making any sense. Can someone help me identify what's wrong with this code? I noticed that my console ...
I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...
I'm relatively new to working with REACT and I've been experimenting by tweaking existing examples. Currently, I'm following a guide that involves Formik & Material UI components. My current task is to replace a text input box with a rad ...
I am curious as to why there is no information available on how to integrate Redux with inheritance. For instance, if I have a base component: class BaseComponent extends Component{ } and all other components extend BaseComponent: class Todo extends Ba ...
I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...
I'm on a mission to showcase a grid across the entire webpage made up of small cells with equal heights and widths, much like the example below. This happens to be my debut project using React and I'm in search of a method to achieve this: This ...
Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...
I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...
I am working on customizing a CSS dropdown menu for my website. My goal is to have the homepage aligned to the left side of the page instead of the center. Below is the style sheet and the div tags I am using for the dropdown navigation bar: ul, li, htm ...
Looking to attach a right hand column to the top of the window as you scroll using Bootstrap 3.0 and 'affix' feature. Here is the HTML for the element: <div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477"> This is ...
<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...
After creating a next.js app using Vercel, I decided to add chakra-ui by running the following command: npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 Unfortunately, this resulted in an error message appearing: TypeError: ...
Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...