If we have a legacy MUI snippet like this:
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Hidden from '#material-ui/core/Hidden';
import Typography from '#material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary
}
});
const ColumnDirection = withStyles(styles)(({ classes }) => (
<div className={classes.root}>
<Grid container justify="space-around" spacing={4}>
<Grid item xs={3}>
<Grid container direction="column" spacing={2}>
How do we realize the same functionality in mui v5?
Related
I have an Appbar that has a fixed colour background that has been applied using the createTheme module for material-ui. I have been asked to apply a linear gradient for a transitioning color effect to the Appbar. I have tried using palette: {
background: {
paper: '-webkit-linear-gradient(to left, #30e8bf, #ff8235)',
}, in my createTheme then using sx={{ bgcolor: 'background.paper' }} in my Appbar.
Any suggestion to changes I need to make ?
import * as React from 'react'
import AppBar from '#mui/material/AppBar'
import Box from '#mui/material/Box'
import Toolbar from '#mui/material/Toolbar'
import Stack from '#mui/material/Stack'
import Button from '#mui/material/Button'
import Tabs from '#mui/material/Tabs'
import Tab from '#mui/material/Tab'
import Typography from '#mui/material/Typography'
import IconButton from '#mui/material/IconButton'
import MenuIcon from '#mui/icons-material/Menu'
import AccountCircle from '#mui/icons-material/AccountCircle'
import Switch from '#mui/material/Switch'
import FormControlLabel from '#mui/material/FormControlLabel'
import FormGroup from '#mui/material/FormGroup'
import MenuItem from '#mui/material/MenuItem'
import Menu from '#mui/material/Menu'
import CssBaseline from '#mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '#mui/material/styles'
import Chip from '#mui/material/Chip'
import Check from '#mui/icons-material/Check'
const finalTheme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '3rem',
backgroundColor: '#fff',
},
},
},
},
typography: {
// In Chinese and Japanese the characters are usually larger,
// so a smaller fontsize may be appropriate.
fontSize: 15,
},
palette: {
background: {
paper: '-webkit-linear-gradient(to left, #30e8bf, #ff8235)',
},
},
})
export default function NavBar() {
const [auth, setAuth] = React.useState(true)
const [anchorEl, setAnchorEl] = React.useState(null)
const [value, setValue] = React.useState('apple')
const handleChange = (event) => {
setAuth(event.target.checked)
}
const handleMenu = (event) => {
setAnchorEl(event.currentTarget)
}
const handleClose = () => {
setAnchorEl(null)
}
return (
<React.StrictMode>
<Box sx={{ flexGrow: 1 }}>
<ThemeProvider theme={finalTheme}>
<AppBar position="static" sx={{ bgcolor: 'background.paper' }}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }} />
<Tab value="0" label="Sessions" />
<Tab value="1" label="Gallery" />
<Tab value="2" label="About Us" />
{auth && (
<div>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</ThemeProvider>
</Box>
</React.StrictMode>
)
}
By default the helperText "Some important text" is not aligned to the far left. How can it be done?
You can use makeStyles for your css and then apply your generated styles to the className prop inside of the FormHelperTextProps prop from TextField.
import React from "react";
import { TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
helperText: {
marginLeft: 0
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<TextField
FormHelperTextProps={{
className: classes.helperText
}}
label="Test"
helperText="Helper text..."
variant="outlined"
/>
</div>
);
}
Live demo:
New to Material UI I'm trying to create a sticky div with a set width similar to how Material UI has their side nav on the right of their docs. For some reason I'm unable to get the div to stick. Per research and the docs I've read through several questions and here are my attempts:
Attempt 1
I tried utilizing Box but it scrolls with the page:
import React from 'react'
import { Hidden, Box, List,ListItem } from '#material-ui/core/'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
box: {
background: 'red',
position: 'sticky',
top: 70,
bottom: 20,
paddingTop: 100,
marginTop: theme.spacing(2),
width: 300,
},
sub: {
display: 'block',
overflow: 'auto',
},
}))
const SideToc = ({ nav }) => {
const { box, sub } = useStyles()
return (
<>
<Hidden smDown>
<Box className={box}>
Contents
<List className={sub} component="nav" aria-label="main mailbox folders">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Box>
</Hidden>
</>
)
}
export default SideToc
Attempt 2
after research I've found a few mentions of Drawer but when I deploy the below component my green drawerPaper is fixed to the left and my blue Drawer is to the right a correct width.
import React from 'react'
import Drawer from '#material-ui/core/Drawer'
import Hidden from '#material-ui/core/Hidden'
import List from '#material-ui/core/List'
import ListItem from '#material-ui/core/ListItem'
import { makeStyles } from '#material-ui/core/styles'
const SideToc = ({ nav }) => {
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
drawer: {
background: 'blue',
width: 300,
flexShrink: 0,
},
drawerPaper: {
marginTop: 120,
background: 'green',
},
}))
const { toolbar, drawer, drawerPaper } = useStyles()
return (
<>
<div className={toolbar} />
<Hidden smDown>
<nav className={drawer} aria-label="mailbox folders">
<Drawer
classes={{
paper: drawerPaper,
}}
variant="permanent"
>
Contents
<List component="nav" aria-label="main mailbox folders">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Drawer>
</nav>
</Hidden>
</>
)
}
export default SideToc
Here is my parent component that has the content with the set width nav:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles'
// Components
import SideToc from './SideToc'
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
content: {
flexGrow: 1,
padding: theme.spacing(3),
overflow: 'hidden',
background: 'orange',
},
}))
const Parent = ({ nav, children }) => {
const { content, toolbar } = useStyles()
return (
<>
<main className={content}>
<div className={toolbar} />
{children}
</main>
<SideToc className={toolbar} nav={nav} />
</>
)
}
export default Parent
Research
How to make a Material UI grid element sticky?
Reactjs Material-ui hide appBar sticky or static
Make a React Material-UI component to stick to the bottom-right of the screen
React Material-Ui Sticky Table Header with Dynamic Height
In Material UI if I want a div to be sticky that will not scroll and have a fixed width how should that be done? Is my issue due to my parent? Should I be using Material's Grid in this approach?
Edit
After further testing I am able to get the side nav to stick but the content, if outside the viewport, will not allow scrolling. The parent component has been modified with just a div surrounding the SideToc component:
<>
<main className={content}>
<div className={toolbar} />
{children}
</main>
<div>
<SideToc toc={toc} />
</div>
</>
SideToc Component:
import React from 'react'
import { Hidden, Box, List, ListItem } from '#material-ui/core/'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
box: {
marginTop: theme.spacing(8),
top: theme.spacing(8),
width: 250,
position: 'sticky',
right: 0,
overflowY: 'auto',
flexShrink: 0,
},
}))
const SideToc = ({ nav }) => {
const { box } = useStyles()
return (
<>
<Hidden smDown>
<Box className={box} component="nav">
Contents
<List component="nav">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Box>
</Hidden>
</>
)
}
export default SideToc
Per request:
How can I align items vertically in material UI?
https://codesandbox.io/s/material-demo-forked-wrn9x
Here I want put Start element and top, Center element at center and End element at bottom
I am looking for clearest and best solution
If you using grid just do this :
<Grid
container
direction="column"
justify="center"
alignItems="center"
spacing={3}
className={classes.container}
>
you can use the interactive tool of MUI doc for play around and get the props you have to pass for create all the layout you need in the future.
https://material-ui.com/components/grid/#grid
Here is the code that will make three grids - start, centre and end to appear in a column one after another. This layout will remain the same across all screen resolutions/breakpoints.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
border: '2px solid #969292',
}
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>Start</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>Center</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>End</Paper>
</Grid>
</Grid>
</div>
);
}
This code will generate a layout like below:
I'm using v1.1.0 of material-ui in React 16.3.2. I'm trying to create a landing page similar to Showcase - Local Insights
where the dialog has opacity (Find foreclosures). I'm trying to use PaperProps for Dialog component described here Dialog doc
Here's a component I've created to try to do this.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import ForwardIcon from '#material-ui/icons/Forward';
import Input from '#material-ui/core/Input';
import FormControl from '#material-ui/core/FormControl';
import Slide from '#material-ui/core/Slide';
const styles = theme => ({
dialogPaper: {
opacity: 0.5,
border: '#FF0000 1px solid',
},
button: {
margin: '30px'
}
});
function Transition(props) {
return <Slide direction="up" {...props} />;
}
class SignInDialog extends React.Component {
state = {
open: false,
username: ''
};
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
render() {
const { classes } = this.props;
return (
<div>
<Button variant="fab" color="primary" aria-label="add" className={classes.button} onClick={this.handleClickOpen}>
<ForwardIcon />
</Button>
<Dialog
PaperProps={styles.dialogPaper}
open={this.state.open}
TransitionComponent={Transition}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">WELCOME</DialogTitle>
<DialogContent>
<p>SIGN IN</p>
<FormControl className={classes.formControl}>
<Input
value={this.state.searchString}
onChange={this.handleChange('search')}
id="siginin-input"
placeholder="Enter your username"
/>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary">
Continue
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
SignInDialog.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SignInDialog);
I haven't been able to figure out how to get the Dialog to take the styles. What is needed to get PaperProps to work?
If you want to use PaperProps you have to specify the props of the Paperfor which you are applying style.
<Dialog
PaperProps={{ classes: {root: classes.dialogPaper } }}
/>
You can also use classes property and override the style
<Dialog
classes={{paper:classes.dialogPaper}}
/>
The correct way to overide paper props is by using classNames
<Dialog
PaperProps={{ className: classNames(classes.dialogPaper) }}/>
<Dialog
PaperProps={{ classes: {root: classes.dialogPaper } }}
/>