how can i set a border radius in dialogue material ui? this image is pop up dialogue that represent a button. i want to set border radius on this pop up dialogue for styling.
i try to insert borderRadius in sx, but it doesn`t work
here`s my code
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
}}
//onMouseOutCapture={()=> setOpen(false)}
>
<Popover
open={Boolean(open)}
anchorEl={open}
anchorOrigin={{
vertical: 'center',
horizontal: 'left',
}}
transformOrigin={{
vertical : 'center',
horizontal : 'left',
}}
>
<BoxContainer2
onMouseLeave={() => setOpen(null)}
>
<Button
sx={{
width:"100%",
borderRadius:10,
"&:hover":{
//border: "1px solid #00FF00",
//color: "gray",
backgroundColor: "white",
//opacity: 0,
}
}}>
tes
</Button>
</BoxContainer2>
</Popover>
</Dialog>
Assuming that the goal is to set border radius for the Dialog modal, since this component internally uses Paper for the modal content, perhaps try pass a sx style in the property PaperProps to style the modal.
Tested below example in here: stackblitz
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
}}
// 👇 Props passed to Paper (modal content)
PaperProps={{ sx: { borderRadius: "50px" } }}
>
...
If for some reason this does not work, another option could be to try style the nested class name .MuiDialog-paper, which would also target Paper:
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
// 👇 Another option to style Paper
"& .MuiDialog-paper": {
borderRadius: "50px",
},
}}
>
...
Related
I am trying to use the re-resizable resizable to change the size of the popover but it is not working, is it impossible? and if so is there another way to resize the popover?
return (
<Resizable>
<Popover
open={!isStoredTabsNull()}
onClose={handleClose}
anchorEl={anchorEl}>
<Paper
style={{
backgroundColor: DefaultStyle.backgroundColor,
overflow: 'auto'}}>
{ storedTabs?.map((tabsGroup) => (
<StoredTabsItem
key={tabsGroup.id}
storedTabsGroup={tabsGroup}
projectFolder={projectFolder}
openFiles={openFiles}
overwriteState={overwriteState}
tabs={tabs}
/>
))}
</Paper>
</Popover>
</Resizable>
)
TL;DR
In a nutshell, wrap your Popover content (children) in <Resizable>, and not the Popover itself, to make it re-size.
Explanation
Yes, it is possible to resize an MUI Popover with re-resizable. Like the underlying Modal component, Popover's sizing is driven, by default, by its content. Adding a child[ren] wrapped in Resizable will give you the ability to resize the Popover. For example:
<Popover
open={!isStoredTabsNull()}
onClose={handleClose}
anchorEl={anchorEl}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<Paper
style={{
backgroundColor: DefaultStyle.backgroundColor,
overflow: "auto"
}}
>
<Resizable>
{storedTabs?.map((tabsGroup) => (
<StoredTabsItem
key={tabsGroup.id}
storedTabsGroup={tabsGroup}
projectFolder={projectFolder}
openFiles={openFiles}
overwriteState={overwriteState}
tabs={tabs}
/>
))}
</Resizable>
</Paper>
</Popover>
(In this example using your code, I added Resizable inside of Paper because Paper also gets its height from its content, unless otherwise defined.)
Which will result in:
Working CodeSandbox: https://codesandbox.io/s/mui-popover-with-re-resizeable-forked-t96dko?file=/demo.js
After some digging I found a different way. If anyone else is looking for a simpler answer that doesn't require to install another library you can use the CSS property resize (both meaning: "The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically."(Source:developer.mozilla.org)
return (
<Popover
open={!isStoredTabsNull()}
onClose={handleClose}
anchorEl={anchorEl}>
<Paper
style={{
backgroundColor: DefaultStyle.backgroundColor,
overflow: 'auto',
resize: "both",
}}>
{ storedTabs?.map((tabsGroup) => (
<StoredTabsItem
key={tabsGroup.id}
storedTabsGroup={tabsGroup}
projectFolder={projectFolder}
openFiles={openFiles}
overwriteState={overwriteState}
tabs={tabs}
/>
))}
</Paper>
</Popover>
)
You can use "PaperProps" to give height and width like this. No need to use Resizeable.
<Popover
open={!isStoredTabsNull()}
onClose={handleClose}
anchorEl={anchorEl}
PaperProps={{
style: { width: 400, height: 400 },
}}
>
<Paper
style={{
backgroundColor: DefaultStyle.backgroundColor,
overflow: "auto",
}}
>
{storedTabs?.map((tabsGroup) => (
<StoredTabsItem
key={tabsGroup.id}
storedTabsGroup={tabsGroup}
projectFolder={projectFolder}
openFiles={openFiles}
overwriteState={overwriteState}
tabs={tabs}
/>
))}
</Paper>
</Popover>;
I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.
I need to change this hover color into green.
This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor + "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.
<Select
// to override the border color of the Select input
sx={{
"&:hover": {
"&& fieldset": {
border: "3px solid green"
}
}
}}
// to override the color of the dropdown container
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root.Mui-selected": {
backgroundColor: "yellow"
},
"& .MuiMenuItem-root:hover": {
backgroundColor: "pink"
},
"& .MuiMenuItem-root.Mui-selected:hover": {
backgroundColor: "red"
}
}
}
}}
Live Demo
You can use inputProps of Select and set the sx prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
Just inspect the element you want to apply hover CSS.
https://mui.com/customization/how-to-customize/#overriding-nested-component-styles
For example find MuiSlider-thumb in the elements and try to apply on, discard the hash value in front
.MuiSlider-thumb:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
const useStyles = makeStyles({
buttonStyle: {
color: "red",
background: "black",
"&hover": {
transform: "scale(10)",
background: "black",
},
},
});
i what to button to be flat without hover effect and to be scale by 10% and i
do not know how?
return (
<div>
<h1>Heloo</h1>
<Button
className={classes.buttonStyle}
style={{ backgroundColor: "transparent" }}
variant="contained"
onClick={() => butttonHandler()}
>
helooo
</Button>
</div>
);
You have the wrong CSS selector for styling the hover effect. It should be &:hover instead of &hover.
You should use transform: "scale(1.1)" to scale the button by 10% on hover. Here's the documentation on scale()
You can add the disableElevation prop to the Button component. It disables elevation on hover and keep the button "flat"
const useStyles = makeStyles({
buttonStyle: {
color: "red",
background: "black",
"&:hover": {
transform: "scale(1.1)", // Scale by 10%
background: "black"
}
}
});
return (
<Button
className={classes.buttonStyle}
disableElevation
variant="contained"
>
helooo
</Button>
);
Note: In your original code, you are setting the button background to be black in your makeStyles styling, but then you are overwriting it with style={{ backgroundColor: "transparent" }} inside your Button component.
Is there any way to remove top and bottom padding from Menu component?
Tried to set padding to 0 in PaperProps and also in makeStyles but when I inspect the element on browser it still shows 8px default padding on top and bottom.
Here's the code if it helps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
paddingTop: '0px',
},
}}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
target the list class from Menu classes prop.
<Menu
{...other props}
classes={{list:classes.list}}
>
{...meuItem}
</Menu>
and useStlyes will be:
const useStyles = makeStyles(() =>
createStyles({
list:{
padding:'0'
}
}),
);
Checkout a Codesandbox demo
use MenuListProps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
},
}}
MenuListProps={{ sx: { py: 0 } }}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
Try this
<MenuItem dense=true />
From Materiul-UI dense : If true, compact vertical padding designed for keyboard and mouse input will be used.
This might be the issue.
Is it possible to add arrow to material UI popover component?
Thanks,
I think this is what you want (Without using popper Component)
You will need to override background color of Popover's child component i.e. paper with transparent color;
Using psudo element of Box Component to create an arrow element.
import * as React from "react";
import Popover from "#mui/material/Popover";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import Box from "#mui/material/Box";
export default function BasicPopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div style={{ width: 400, height: 200, backgroundColor: "lightblue" }}>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
PaperProps={{
style: {
backgroundColor: "transparent",
boxShadow: "none",
borderRadius: 0
}
}}
>
<Box
sx={{
position: "relative",
mt: "10px",
"&::before": {
backgroundColor: "white",
content: '""',
display: "block",
position: "absolute",
width: 12,
height: 12,
top: -6,
transform: "rotate(45deg)",
left: "calc(50% - 6px)"
}
}}
/>
<Typography sx={{ p: 2, backgroundColor: "white" }}>
The content of the Popover.
</Typography>
</Popover>
</div>
);
}
Here is working Demo: basic Popover With Arrow
If you'd like to use a Popper instead, then the following sandbox has a component you should be able to copy straight into your codebase (typescript): RichTooltip. The standard Tooltip was not that suited to rich content for our project and did not allow buttons, selecting text, etc.
https://codesandbox.io/s/popper-with-arrow-58jhe
If you want arrow to a button which open popover you can just put html for arrow there.
<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}>
Open Popover <img src="//path-for-arrow-image" />
</Button>
<Popover {...propsOfPopover}> {children} </Popover>