I need to set hight of dialog, but the MUI CSS seems to get higher CSS priority.
How do I use it or override it?
I tried something like this:
<Dialog
classes={{ paper: classes.paper }}
..
..
</Dialog>
But still my class ".qdidataappseed-makeStyles-paper-..." is lower priority.
Thanks
It possible to set Dialog component height using sx properties:
<Dialog sx={{height: '100px'}}
or minHeight / maxHeight depends on what exactly we need to set.
Related
I want to customize the MUI Select component. Basically I just want to remove the border or rather the outline. I tried to override the styles, tried to use a NativeSelect and tried to use a customized InputBase with the Select as inputComponent but none of this worked. Any help would be much appreciated.
I followed #Bar's answer: in my case I also had to reset the box-shadow applied over the Select.
For Material v5,
<Select sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
MUI exposes the disableUnderline prop in Select component. Just set it to true
The border is applied to the label of the OutlinedInput component. Edit the css rule notchedOutline of the OutlinedInput component to remove the border. https://mui.com/api/outlined-input/#css
What worked for me was to use
disableUnderline to remove the line below the selector
variant="standard" to get rid of borders, both when the selector is focused or not.
Setting '.MuiOutlinedInput-notchedOutline': { border: 0 } will only remove borders of a selector when not focused.
Following the instructions in the gatsby-background-image documentation, I'm able to add a full width background image to a component by including the following in my component
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}>
{children}
</BackgroundImage>
This results in the following "stretched" background:
However, I do not want my image to be the full width of the component. Instead, I would like my background image to repeat within my component to achieve the following:
I see that styling of the background image is supported, but I'm not sure how correctly style the background image to make it repeat. Any help would be much appreciated!
Just add the style object as shown in the Styling & Passed Through Styles section.
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}
style={{ backgroundRepeat: 'repeat', backgroundSize: '200' }}>
{children}
</BackgroundImage>
I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.
<div className="confirmation-drawer">
<Drawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}>
<!-- Drawer content goes here -->
</Drawer>
</div>
I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.
The code below worked for me. It uses the preferred one-off styling method in the MUI docs. Transitions work without any additional tweaks. Of course make sure you have a 'relative' element up in the DOM tree.
<Drawer
sx={{
'& .MuiDrawer-root': {
position: 'absolute'
},
'& .MuiPaper-root': {
position: 'absolute'
},
}}
>
</Drawer>
what #Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.
as i said its merely a workaround but i hope it helps somebody.
try this:
import {styled, Drawer as MuiDrawer} from '#mui/material'
const Drawer = styled(MuiDrawer)({
position: "relative", //imp
width: 240, //drawer width
"& .MuiDrawer-paper": {
width: 240, //drawer width
position: "absolute", //imp
transition: "none !important"
}
})
If you want transitions then use collapse.
<Collapse orientation='horizontal' in={open} >
<Box> ... </Box>
</Collapse>
The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.
If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.
https://material-ui.com/api/accordion/
That will allow you to have a small "drawer"-like element that other components can be hidden inside of.
I am trying to create a dialog in material ui which does not blocks the main content.
With my below code i am only able to hide backdrop but not able to disable the backdrop.
<Dialog open={this.state.open} onClose={this.handleClose} hideBackdrop={true} >
Can someone please address my this concern on how to create modals using material-ui which does not blocks the main content
I just wanted to post this as a separate answer. The OP was able to solve his problem by disabling pointer events on the root dialog/modal:
const StyledDialog = withStyles({
root: { pointerEvents: "none", },
paper: { pointerEvents: "auto" }
})(props => <Dialog hideBackdrop {...props} />);
I also tested the following and it worked as well (should also work with Modal component). Note, I also had to use disableEnforceFocus, which is a property of the Modal component. You should be aware that there are implications for accessibility when doing this. It's on you to handle the accessibility correctly.
<Dialog
disableEnforceFocus
style={{ pointerEvents: 'none' }}
PaperProps={{ style: { pointerEvents: 'auto' } }}
>
...
</Dialog>
This behavior is inherent to modals and Dialog is based on Modal. If you don't want it to block the main content, then one option is to use Popper instead of Dialog.
I have a blueprintjs dialog :
<BP.Dialog iconName="application" isOpen={this.state.fieldformopen} ...>
When the state fieldformopen changes, the dialog appear. But it appears with a growing animation. This is a problem since the dialog is quite full of things, and the animation is slow and discontinued.
I don't see any way of disabling the animation. The fields transitionDuration and transitionName are set only when changing css.
Thanks for any information to disable the animation.
Add this style to the Dialog component:
style={{ transition: 'none' }}
So your component would look like:
<Dialog
style={{ transition: 'none' }} >
This removes the growing animation, but still keeps the more subtle fade animation.