I'm building a mobile version of a web app using Material UI and having trouble matching designs. I'm using MUI App-Bar together with MUI Modal to create something similar to the mockups shown below.
The expected behavior is that the user selects the button in the top right of the header to open the modal, and has the option to use the top right button again to close the modal. The user should also be able to select My App logo in the header to navigate to the home page.
The actual behavior is that the header bar is covered by the modal's backdrop; I can add styling like marginTop: 150px to the backdrop to visually achieve the expected result, but the button and the logo are still not usable.
Is there a way to override the backdrop component so that the header will be usable?
const useStyles = makeStyles((theme: Theme) => ({
card: {
position: "absolute",
top: "160px",
width: "90vw",
borderTopLeftRadius: "0px",
borderTopRightRadius: "0px",
},
backDrop: {
marginTop: "160px",
},
}));
const Header = (props) => {
const classes = useStyles();
const [menuOpen, setMenuOpen] = React.useState(false);
const handleOpenUserMenu = () => {
setMenuOpen(true);
};
const handleCloseUserMenu = () => {
setMenuOpen(false);
};
return (
<AppBar
position="static"
style={{
backgroundColor: "#FFFFFF",
zIndex: -1,
}}
>
<Container maxWidth="xl">
<Toolbar>
<Box sx={{ flexGrow: 1 }}>
<Link to={"/home"}>
<Logo className={classes.logo} />
</Link>
</Box>
<Box sx={{ flexGrow: 0 }}>
<IconButton onClick={handleOpenUserMenu}>
<MenuIcon />
</IconButton>
<Modal
open={menuOpen}
onClose={onClose}
BackdropProps={{ classes: { root: classes.backDrop } }}
>
<Card className={classes.card}>
<CardContent>
<MenuItems menuOptions={menuOptions} />
</CardContent>
</Card>
</Modal>
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
As stated in MUIModal documentation the modal component is supposed to behave like that I would try to use menu component instead
Quoting documentation:
If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal. Modal is a lower-level construct that is leveraged by the following components:
Dialog
Drawer
Menu <--
Popover
Related
I'm having a small issue this didn't happen on previous updates of react-router-dom however I'm now using V6 and I don't understand why this is happening cause it really does not make sense to me.
So when I click on Home while being in another path
it should take me to the HOME path right and it does however when I click on it AGAIN right after that it takes me back to the previous path before HOME and that does not make any sense at all.
This is what I have:
//Initialize
const navigate = useNavigate("");
const goHome = () => {
navigate("/Home");
};
//Render
<Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
<StyledIconButton size="small" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick = {goHome}>
<HomeIcon/>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> HOME </Typography>
</StyledIconButton>
</Box>
Is a simple box wrapper from mui with an iconbutton, icon, typo and that's it. I'll be making a Sandbox.
UPDATE
Sandbox: Code-SandBox
UPDATE 2
Sandbox gave me the following:
First of all, it's good to mention that I'm a bit new to react world. I am using Mui with react. here is my code:
const Search = (props) => {
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
return !isSmall || props.show ? <SearchDiv {...props} /> : null;
};
as you can see it's a simple component that under a circumstance returns another custom component. my problem is that if I Don't add {...props} to the child component(SearchDiv) the whole component Search won't show up. but if I add everything works fine and I can't understand why? do we always need to pass all props to any child component?
I searched StackOverflow and google but I didn't find something similar to my question.
Edit : here is the rest of the code:
const SearchDiv = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "50%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
},
[theme.breakpoints.down("sm")]: {
marginLeft: theme.spacing(1),
},
}));
const Navbar = () => {
const [showSearch, setShowSearch] = useState(false);
return (
<AppBar>
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
<Search show={showSearch}>
<StyledInputBase
placeholder="Search…"
inputProps={{ "aria-label": "search" }}
/>
</Search>
<SearchIcon onClick={() => setShowSearch(true)} />
</Toolbar>
</AppBar>
);
};
export default Navbar;
For reference, see Composition vs Inheritance.
Without passing props, ie
<SearchDiv />
your styled <div> has no children to render. When you pass all the parent props via {...props}, that includes children, the equivalent of...
<SearchDiv children={props.children} show={props.show} />
I wouldn't recommend this though. An alternative would be
<SearchDiv>
{ props.children }
</SearchDiv>
as per the containment section of the guide linked above.
I am using the Menu component from react-native-paper for options menu on modal-header.
Below is the screenshot of the modal:
The parent tag holding the Menu has sibling elements (stuff below the header).
It seems that due to this heirchy, the menu is being rendered under other elements.
I tried override this overlaping of elements by assigning possition:"absolute", zIndex: 100.
zIndex is haveing no effect on the way it is being overlaped. I tried varying the zIndex from 1 to 1500, but its had n effect either.
Following is the code for Menu Component wrapper (ModalOptions):
const ModalOptions = () => {
const [visible, setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View>
<Menu
style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
visible={visible}
onDismiss={closeMenu}
anchor={
<TouchableOpacity onPress={openMenu}>
<ThreeDotIcon size={35} color={colors.darkGrey} />
</TouchableOpacity>
}>
...
</Menu>
</View>
</Provider>
);
};
I guess I'm not using zIndex properly...
If so, how should I be using it instead?
If not, is there any other way to get this done?
or maybe I need to re format the code in such way that the heirchal level of Menu is increased
but I would really not prefer going this way.
You can use a View to wrap outsize the provider with style={{zIndex: 100}}, like below
<View style={{zIndex: 100}}>
<Provider>
<View>
<Menu
style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
visible={visible}
onDismiss={closeMenu}
anchor={
<TouchableOpacity onPress={openMenu}>
<ThreeDotIcon size={35} color={colors.darkGrey} />
</TouchableOpacity>
}>
...
</Menu>
</View>
</Provider>
</View>
I'm trying to implement a select dropdown menu in a React Native application using npm's react-native-dropdown-picker package.
I successful did it in one of the application's views/screens and tried to replicate by the same way but the dropdown menu is not rendering the options.
Checking the redux's store is possible to see the data that should be rendered, and in other view it does render. The data is the same for both screens such as the picker component.
return (
<>
<DefaultHeader navigation={navigation} />
<Container>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => setRefreshing(true)}
/>
}>
<SalesAccountFilter /> // <-- Dropdown is rendered but dont render options
{isLoading === true ? (
<View style={{marginTop: '50%'}}>
<Spinner color="#054785" />
</View>
) : (
<Content>
...some content
</Content>
)}
</ScrollView>
</Container>
</>
);
In the other screen that the dropdown is implemented in the exactly same way it is working fine. There is no error about it on the console. In the following snippet is the implementation of "SalesAccountFilter".
const styles = StyleSheet.create({
picker: {
maxWidth: 320,
minWidth: 320,
color: 'black',
zIndex: 1000,
},
pickerPlaceholder: {
color: '#bfc6ea',
},
});
...
return (
<DropDownPicker
style={styles.picker}
items={[...accounts]}
defaultValue={null}
placeholder="Select an account . . ."
placeholderStyle={styles.pickerPlaceholder}
containerStyle={{height: 40, width: 320}}
labelStyle={{
fontSize: 14,
textAlign: 'left',
color: '#000',
}}
itemStyle={{justifyContent: 'flex-start'}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={handleSelected}
searchable={true}
searchablePlaceholder="Search account"
searchableError={() => <Text>Not found</Text>}
activeLabelStyle={{color: 'blue'}}
/>
);
**Versions:**
Ubuntu 20.04lts;
Node v15.5.0;
React Native Picker 1.9.8;
React 17.0.1;
Nativebase 2.15.0;
React Native 0.63.4;
Emulator: Pixel 4 (latest build);
I was able to pass Material-UI's IconButton inside Material-UI's Tooltip title.
All the views are working properly, except I cannot press the button.
I want to add a Close button to make the tooltip close on clicking the close button, but I cannot do that. Is there a way to do this? If yes, please provide a solution to this.
MUI's Tooltip has pointer-events set to none by default, so you need to enable this. Add a class to your tooltip and then add this to the css:
pointer-events: auto;
I solved it by using Popper from Material-UI.
In case someone looking for this, here are some useful snippet for it.
import * as React from 'react';
import {Tooltip, Typography} from '#mui/material'
import CloseIcon from '#mui/icons-material/Close'
export const TooltipWithIcon = (title, message) => {
const [open, setOpen] = useState(false)
const handleClose = e => {
if (open) {
setOpen(false)
}
return null
}
return(
<Tooltip
open={open}
title={
<>
<CloseIcon sx={{ float: 'right' }} onClick={e => handleClose(e)}></CloseIcon>
<Typography variant="h6" sx={{ fontWeight: 700 }}>
{title}
</Typography>
<Typography variant="body1" sx={{ fontSize: 14 }}>
{message}
</Typography>
</>
}
>
</Tooltip>
)
}