I am using nextjs with material ui
"#mui/material": "^5.0.1",
"#mui/styles": "^5.0.1",
and here is my component
import { AppBar, Toolbar, Typography, Box, Button, Link } from "#mui/material";
import { makeStyles } from "#mui/styles";
const Navbar = () => {
const useStyles = makeStyles(() => ({
navItem: {
color: "white"
}
}));
const classes = useStyles();
return (
<>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
MyCode
</Typography>
<Typography variant="h6" component="div">
<Link className={classes.navItem} href="/blog">Blog</Link>
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
</>
)
}
export default Navbar;
I have created this navbar with a blog nav item and with login button.
Blog nav item is not visible on the screen as the color it inherit the color of background of nav bar.
So I added some classes by using makeStyles and created a navItem class with color:white
It shows the class on the DOM on html but this is not visible in Styles section, so color is not white.
what can be the issue?
You should define useStyles outside your functional component. In this case you don't need use makeStyles. Just:
<Link color="white" />
Related
I am new to react and I am trying to change the color of the navbar. I modified the property backgroundColor and the color changes in code sandbox.
But when I run the same code on my local machine the color is not changed until I put !important.
Why does it behave differently for the same code ? And how to avoid such discrepencies ?
Code in local machine-
import * as React from "react";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Toolbar from "#mui/material/Toolbar";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles({
navbar: {
backgroundColor: "red"
}
});
export default function Navbar() {
const classes = useStyles();
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" elevation={0} className={classes.navbar}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}
Output in local machine-
Sandbox link- https://codesandbox.io/s/buttonappbar-material-demo-forked-8s64r?file=/demo.js:471-472
I am building a Gatsby app and I want once the Menu icon is clicked, my menu will drop down right under the and width to be 100%. Here is my code:
I tried to solve the problem by setting this inside the component, but the component doesn't change at all:
getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
import React, { useState } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import MenuItem from "#material-ui/core/MenuItem"
import { Menu } from '#material-ui/core';
import { Link } from "gatsby"
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: "#e8eaf6",
color: "black"
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1
},
}));
export default function NavBar() {
const classes = useStyles();
const [open, setOpen] = useState(false)
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (e) =>{
setOpen(!open)
setAnchorEl(document.querySelector('header'))
}
const handleMenuClose = () => {
setOpen(!open)
setAnchorEl(null)
}
return (
<AppBar position="static" className={classes.root}>
<Toolbar>
<Typography variant="h5" className={classes.title}>
Inhouse Orders
</Typography>
<IconButton edge="false" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon onClick={(e)=>handleClick(e)}/>
</IconButton>
<Menu
className={classes.menu}
open={open}
onClose={handleMenuClose}
getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
>
<Link to="/1"><MenuItem>1</MenuItem></Link>
<Link to="/2"><MenuItem>2</MenuItem></Link>
<Link to="/3"><MenuItem>3</MenuItem></Link>
<Link to="/4"><MenuItem>4</MenuItem></Link>
</Menu>
</Toolbar>
</AppBar>
);
}
What should I do? Should I create my own theme? Or change a style is ok?
You can use the Anchor playground of the Material UI Popover documentation to determine which parameters to use to adjust the position of the dropdown menu.
About the width of 100%, I am not sure to understand what you want to achieve. The anchor of the dropdown menu is fixed and depending on the style you apply, the width will adapt to the size of the content. With a width of 100%, perhaps you want to use a Dialog instead of a dropdown menu.
I am starting to use React/Material-UI, and also new to CSS etc...
I have a simple page layout with an APPBar. Unfortunately this AppBar overlaps the elements which are meant to go below it.
I have found this answer:
AppBar Material UI questions
But this feels completely wrong. What if my AppBar has a variable height, depending on the icons, display modes etc...?
I have tried to create a vertical grid, to wrap the elements in different items, made the top container a flex one and play with flex settings, nothing seems to work, the app bar always sits on top of the text.
The code is very simple:
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
)
}
export default App;
The "Hello" text chunk is only half visible:
This is happening because the MaterialUI App Bar defaults to position="fixed". This separates it from the standard DOM's layout to allow content to scroll beneath it, but as a result no space is made for it on the page.
You can get around this by wrapping all content below it in a div and specifying enough margin, or by changing the position property of <AppBar> so it's no longer "fixed". In your example, you could also just apply the styles to <Box> if that's the only content below the <AppBar>.
e.g.
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<div style={{marginTop: 80}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
MaterialUI provides a theme mixin for the AppBar that can help. Not sure if you're using the recomended JSS setup, but you can do something like this:
import withStyles from '#material-ui/core/styles/withStyles';
const styles = theme => ({
appBarSpacer: theme.mixins.toolbar
});
const style = withStyles(styles)
function MyScreen ({ classes }) {
<AppBar></AppBar>
<div className={classes.appBarSpacer}></div>
<Box></Box>
}
export default style(MyScreen)
The mixin will give that div the same height as your AppBar, pushing down the other content.
According to Material-ui, there are 3 solutions to this problem.
https://material-ui.com/components/app-bar/#fixed-placement
You can use position="sticky" instead of fixed. ⚠️ sticky is not supported by IE 11.
You can render a second component
You can use theme.mixins.toolbar CSS
I personally enjoy using the 2nd solution like this.
return (
<>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</>
);
<AppBar position='static'>
use this it will do it and content won't hide under Appear
I think having a good app setup is opinianted, but I would recommend the following
import React from "react";
import ReactDOM from "react-dom";
import {
AppBar,
Typography,
Box,
CssBaseline,
makeStyles,
Container,
Grid,
Toolbar
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto"
},
appBarSpacer: theme.mixins.toolbar,
title: {
flexGrow: 1
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4)
}
}));
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="absolute">
<Toolbar className={classes.toolbar}>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
AppBar
</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Box>
<Typography variant="h1" style={{ border: "1px solid black" }}>
Hello
</Typography>
</Box>
</Grid>
</Grid>
</Container>
</main>
</div>
);
}
try this!
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
[theme.breakpoints.down('sm')]: {
marginBottom: 56,
},
[theme.breakpoints.up('sm')]: {
marginBottom: 64,
},
},
menuButton: {
marginRight: theme.spacing(1),
},
title: {
flexGrow: 1,
}, }))
You can add the above to your code like this
const Navbar = () => {
const classes = useStyles()
return (
<div className={classes.root}>
<AppBar position='fixed' color='primary'>
<Toolbar>
<IconButton
edge='start'
className={classes.menuButton}
color='inherit'
aria-label='menu'>
<MenuIcon />
</IconButton>
<Typography variant='h6' className={classes.title}>
News
</Typography>
<Button color='inherit'>Login</Button>
</Toolbar>
</AppBar>
</div>
)}
For more documentation visit material-ui breakpoint customization
I'm working on a map with an image overlay that has adjustable opacity. Here is the component code:
import React from 'react'
import PropTypes from 'prop-types'
import { MapWithGroundOverlay } from './MapWithGroundOverlay'
import { withStyles } from '#material-ui/core/styles'
import Box from '#material-ui/core/Box'
import FormLabel from '#material-ui/core/FormLabel'
import Slider from '#material-ui/lab/Slider'
import Grid from '#material-ui/core/Grid'
import Paper from '#material-ui/core/Paper'
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
label: {
padding: theme.spacing(3),
}
})
class AdjustableGroundoverlay extends React.PureComponent {
constructor(props, context) {
super(props, context)
this.state = {opacity: 0.5}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event, value) {
this.setState(state => ({
opacity: value
}));
}
render() {
return (
<Grid container className={this.props.classes.root} spacing={2}>
<Grid item xs={12}>
<MapWithGroundOverlay
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px` }} />}
mapElement={<div style={{ height: `100%` }} />}
opacity={this.state.opacity}
/>
</Grid>
<Grid item xs={6}>
<Paper className={this.props.classes.paper}>
<Box flexDirection="column">
<FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
<Slider
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
</Box>
</Paper>
</Grid>
</Grid>
);
}
}
AdjustableGroundoverlay.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(AdjustableGroundoverlay)
The problem is that the FormLabel and Slider are too close together. If I hover over them, I see that the Slider has a negative margin of -24px:
It seems like the content of the FormLabel therefore sits directly on top of it:
I've tried to change the styling of the Slider by adding these classes to the component in accordance with https://material-ui.com/api/slider/#css:
<Slider
classes={{container: {marginTop: -12}}}
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
but the spacing between the FormLabel and the Slider remains the same. Any idea what is wrong with this implementation?
Update
I've noticed in the console that there is this error:
I'm not sure why the key 'container' is not valid though since it is mentioned in https://material-ui.com/api/slider/#css.
I resolved this by putting the slider in a Box with mt set to 1:
<Paper className={this.props.classes.paper}>
<Box flexDirection="column">
<FormLabel className={this.props.classes.label}>Overlay opacity</FormLabel>
<Box mt={1}>
<Slider
value={this.state.opacity}
min={0}
max={1}
onChange={this.handleChange}
/>
</Box>
</Box>
</Paper>
Now there is more spacing between the label and the slider:
hi :) lets say i have two components one who has the text "orange" as a const and I want its child to have orange text.. using material-ui-next, i'm using withStyles and anything else just doesn't affect the color of the text... here is some code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
const styles = {
card: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
marginBottom: 16,
fontSize: 14,
},
pos: {
marginBottom: 12,
},
};
function SimpleCard(props) {
const { classes } = props;
const bull = <span className={classes.bullet}>•</span>;
return (
<div>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary">
Word of the Day
</Typography>
<Typography variant="headline" component="h2">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
<!-- I want the text from here to become orange-->
<Typography component="p">
well meaning and kindly.<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
);
}
SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleCard);
orange will be at this.props.color
I don't mind it being the object orange from "material-ui/colors/orange" I just want to somehow address that value from within my SimpleCard component and use it when building the styles (or ignore styles all together and just use the color)