Change the position of the drawer in material-ui
I am trying to apply paddingLeft styling to the drawer.
For some reason, My code is not working. Any chance anyone has any idea whats happening here?
<Drawer
containerStyle={{paddingLeft:50}}
className="app-sidebar-content"
variant={type}
open={type.includes("temporary") ? navCollapsed : true}
onClose={this.props.onToggleCollapsedNav}
classes={{
paper: "side-nav"
}}
>
<UserInfo />
</Drawer>
Using the modal element of the CSS API, you can achieve what you are looking for:
<Drawer
open={xxx}
onClose={yyy}
classes={{
paper: classes.paper,
modal: classes.modal
}}
>...</Drawer>
then
const styles = {
modal: {
paddingLeft: 50,
},
}
Ref: https://material-ui.com/api/drawer/
Which version are you using?
With the latest version of material-ui, you can pass classes object and style the component hierarchy.
Hope this helps !
Related
I hope you guys are doing well! This is my code sandbox: https://codesandbox.io/s/hungry-agnesi-vn6039?file=/demo.tsx
I currently want to have the Material UI menu drop down below starting at the exact bottom left of the button. However, as visible in my code sandbox, the menu starts a little bit right of the desired spot I want. Is there a way for me to start the dropdown menu at the bottom left of the button? I really appreciate any responses!
Thanks!
You can add negative marginLeft in your dropdown like this. Here is the working codesandbox
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
MenuListProps={{
"aria-labelledby": "basic-button"
}}
style={{ // Add here you negative margin
marginLeft: "-8px"
}}
>
Let me know if it helps and if is ok for you to add the inline style. Or you can do the same by using a styled component.
[UPDATE]
If you want to apply it in general you can use the theme (which I don't recommend unless you are sure about it) and override the MuiPopover component like this.
import { createTheme } from '#mui/material/styles';
export const theme = createTheme({
components: {
MuiPopover: {
styleOverrides: {
paper: {
marginLeft: '-8px'
}
}
}
},
});
Give you button a little margin from left.
I want to place a freeAction button in material-table at top-left.
Here is the the illustration of what I want.
I know it's something like component-overriding. But unable to do that and can't find any example.
Thanks everyone for your attention. It was so easy, but didn't find before.
I added an option in Material-Table markup as
options={{
search: true,
actionsColumnIndex: -1,
toolbarButtonAlignment:"left" // here is the option to change toolbar buttons' alignment
}}
You can have this by overriding the Toolbar component instead of using the actions property. Below is an example code of the components property that you need on your <MaterialTable />, you can change the styles and components according to what you need:
components={{
Toolbar: (toolbarProps) => (
<Box display="flex" alignItems="center">
<Button
style={{ marginLeft: '8px', marginRight: 'auto' }}
variant="contained"
color="secondary"
>
Refresh
</Button>
<MTableToolbar {...toolbarProps} />
</Box>
),
}}
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.
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.