I've created a create-react-app project, where I'm using Material UI. Here I've used Box item with display="flex"; inline style. But the flex is not working at all. Here is an image.
When I add add display: flex on the inspect element. It works.
I've uploaded the project to github pages. Funny thing is, it works fine on there. Here is the link of the uploaded page. Why is it not working as intended in the local host server?
<AppBar position="static">
<Toolbar className={classes.toolbar}>
<Typography variant="h5" className={classes.title}>
Travel Advisor
</Typography>
<Box display="flex">
<Typography variant="h6" className={classes.title}>
Explore new places
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase placeholder="Search..." classes={{ root: classes.inputRoot, input: classes.inputInput }} />
</div>
</Box>
</Toolbar>
</AppBar>
Related
I'm trying to style and change position of a Link component, I'm trying to have the Link (Forget Password?) at the right end, but now it's centered as shown in the image below
Also I want to change the color of it, I tried color="black" but didn't work
I'm using grids trying to have the texts apart from each other.
The Code
{/* Password */}
<Grid container mt={4}>
<Grid item xs={6} justify={"flex-start"}>
<Typography
variant="h9"
gutterBottom
component="div"
style={{ fontWeight: "bold", textAlign: "left"}}
>
Password
</Typography>
</Grid>
<Grid item xs={6} justify={"flex-end"}>
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Grid>
</Grid>
If "black" isn't defined in your theme, that won't work. color="primary" should work, but if you can also define black as a color in your theme.
Alternatively, if you want only this link to be black, you can add the attribute sx={{ color: 'black' }} to <Link> and that should work.
If it's not necessary to do so, I wouldn't wrap the link in a typography; just apply all the styles directly to link, as link already uses a typography element under the hood.
Try this to right-align your password link:
<Grid item xs={6}>
<Box display="flex" justifyContent="flex-end">
<Typography
variant="body2"
gutterBottom
component={Link}
// align="right"
to="/register"
>
{/* <Link to="/register">Forget Password?</Link> */}
Forget Password?
</Typography>
</Box>
</Grid>
Using the React Material UI library (material-ui.com), how do you position the AppBar to the left side of the screen? The design I need to build has a the global nav (which you'd typically see across the top) along the left, with fixed position. There are also links in the nav that will slide panels out from the left (from "behind" the global nav).
I can't find anything in the documentation which supports this design. Is it possible?
Thanks
I was able to accomplish this using an AppBar in a flex container using flexDirection="row".
<React.Fragment>
<CssBaseline />
<Box display="flex" flexDirection="row" className={classes.root}>
<Box flexGrow={0}>
<AppBar elevation={0} position="sticky">
<div>Left</div>
<div>appBar</div>
<Button>try me</Button>
<Divider />
<Button>try me2</Button>
</AppBar>
</Box>
<Box display="flex" flexDirection="row" flexGrow={1}>
<Box
display="flex"
flexDirection="column"
className={classes.mainArea}
flexGrow={1}
></Box>
</Box>
<Box flexGrow={0}>
<AppBar elevation={0} position="sticky">
<div>Right</div>
<div>appBar</div>
<Button>try me</Button>
<Divider />
<Button>try me2</Button>
</AppBar>
</Box>
</Box>
</React.Fragment>
Code SandBox Demo
Following the documentation of material-ui (https://material-ui.com/components/dialogs/),
I see that the dialog can be full screen. However, when I use it with AppBar and ToolBar, the DialogContent does not get displayed.
Below is the code for my dialog.
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open full-screen dialog
</Button>
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
<AppBar style={{ backgroundColor: "#182026" }} className={classes.appBar}>
<Toolbar>
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Sound
</Typography>
</Toolbar>
</AppBar>
<DialogContent>
<DialogContentText>
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
</Dialog>
This just gives me
When I inspect this, I can see that the content is hidden inside the header which is pretty weird.
Since this code is mostly from the demo, I am not sure how to fix it. Thanks in advance.
You need to add position relative to your app bar class.
const useStyles = makeStyles((theme) => ({
appBar: {
position: 'relative',
},
title: {
marginLeft: theme.spacing(2),
flex: 1,
},
}));
And on the actual appear apply
<AppBar className={classes.appBar} />
This question already has answers here:
How to make MUI Typography without newline?
(6 answers)
Closed 1 year ago.
I would like to apply two different Typography tags to my text, but I don't want a line break in between.
This is what I have:
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
This is what it looks like (with the line break):
Working example:
https://codesandbox.io/s/jzmz7klzmy
How do I remove the line break?
Wrap those in a display:flex and it will show it in a row.
<div style={{display:"flex"}}>
<Typography variant="title" color="inherit" noWrap>
Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
Example
</Typography>
</div>
codesandbox of edited code.
Edit: You can use style={{marginLeft:10}} on Example to give spacing between the two.
And if you want to align them vertically, give flexDirection:'column' to the style of Project.
Use the display prop on version 4.x
<Typography variant="h1" color="inherit" display="inline">
Project:
</Typography>
<Typography variant="subtitle1" color="inherit" display="inline">
Example
</Typography>
Use the inline prop on version < 4.x
<Typography variant="title" color="inherit" inline>
Project:
</Typography>
<Typography variant="subheading" color="inherit" inline>
Example
</Typography>
https://material-ui.com/api/typography/
If I have an AppBar, how can I make it so one group of icons plus the logo is on the left, and another group of icons are on the right of it?
Ex:
Left: (from left to right) 1 menu icon, logo
Right: (from right to left) 1 menu icon, 1 save icon, 1 edit icon
AppBar component:
<AppBar
className={classNames(classes.appBar, {
[classes.appBarShift]: open,
[classes[`appBarShift-left`]]: open,
[classes[`appBarShift-right`]]: !tools,
})}
position='static'
>
<Toolbar className={classNames(classes.topBar)}>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerToggle}
className={classNames(classes.menuButton)}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>React App</Typography>
<IconButton
color="inherit"
aria-label="open tool drawer"
onClick={this.handleToolDrawerToggle}
className={classNames(classes.menuButton)}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
You can use flexbox to control the alignment of elements in the toolbar...
One option is to add flex: 1 to the logo element. It will expand to fill the available space in container. All the elements after logo will be aligned to the right.
OR
Use margin-left: auto to align the second group of buttons to the right side of the flex container.
Here is a live example
const styles = {
// this group of buttons will be aligned to the right side
toolbarButtons: {
marginLeft: 'auto',
},
};
const Demo = ({ classes }) => (
<AppBar position="static">
<Toolbar>
<IconButton color="inherit">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit">Title</Typography>
<div className={classes.toolbarButtons}>
<IconButton color="inherit"><EditIcon /></IconButton>
<IconButton color="inherit"><SaveIcon /></IconButton>
<IconButton color="inherit"><MoreVertIcon /></IconButton>
</div>
</Toolbar>
</AppBar>
);
I know it's been a while since you asked the question, I would like to provide an alternative solution. Add Box tag (similar to flexbox in CSS) around the components on the left and adjust the flexGrow attribute and it works for me:
import Box from '#material-ui/core/Box';
{/* BEFORE APPBAR*/}
<AppBar>
<Toolbar>
<Box display='flex' flexGrow={1}>
{/* whatever is on the left side */}
</Box>
{/* whatever is on the right side */}
</Toolbar>
</AppBar>
{/* AFTER APPBAR*/}
I tried using inline css inside Toolbar component itself, it worked for me;
<Toolbar style={{display:'flex', justifyContent:"space-between", width:'100%'}}>