I want to vertically align some text in a MUI Paper component.
The code is here.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Typography from '#material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3, 2),
height: 200,
verticalAlign: 'middle'
},
}));
function PaperSheet() {
const classes = useStyles();
return (
<div>
<Paper className={classes.root}>
<Typography variant="h5" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
</div>
);
}
export default PaperSheet;
vertical-align CSS property only works with display: block element.
An option for you could be to declare your root class using flexbox:
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3, 2),
height: 200,
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
}));
You can use Stack in MUI v5. Set the direction to column and justifyContent to center to center align the content inside the Card:
<Paper component={Stack} direction="column" justifyContent="center">
<div>
This content is vertically aligned
</div>
</Paper>
Live Demo
Related
I am trying to align the text in the center by using <Typography align="center"> for the footer but it is not working. How can I align the text to center?
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import CssBaseline from "#material-ui/core/CssBaseline";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles(theme => ({
appBar: {
top: "auto",
bottom: 0
}
}));
export default function Footer() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<AppBar color="primary" className={classes.appBar}>
<Toolbar>
<Typography align="center">Visit again</Typography>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
Aligning text inside typography won't help coz its width would only span till the content which would not bring it in center of footer element.
You need to handle it from footer component which is its parent by using flex as I have done below.
const useStyles = makeStyles(theme => ({
appBar: {
top: "auto",
bottom: 0,
textAlign:"center"
},
footer: {
display:"flex",
justifyContent:"center",
}
}));
export default function App() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<AppBar color="primary" className={classes.appBar}>
<Toolbar className={classes.footer}>
<Typography align="center">Visit again</Typography>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
Using flex would bring all the content of footer in center,If you wish to have only Visit again in center this can be achieved by wrapping it up into a div and applying the same CSS that of footer
This Code Working for me.
flexGrow: 1,
textAlign: "center"
Try This
const useStyles = makeStyles((theme) => ({
appBar: {
top: "auto",
bottom: 0
},
typo: {
flexGrow: 1,
textAlign: "center"
}
}));
export default function App() {
const classes = useStyles();
return (
<React.Fragment>
<CssBaseline />
<AppBar color="primary" className={classes.appBar}>
<Toolbar>
<Typography className={classes.typo}>Visit again</Typography>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
Working Code Sandbox Link: https://codesandbox.io/s/falling-dawn-y8mb2?file=/src/App.js
Screenshot:
I am building a 'ReactJS' application and came across the following error:
TypeError: theme.spacing is not a function
(anonymous function)
E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39
36 | avatar:{
37 | display: "block",
38 | margin: "0.5rem auto",
> 39 | width: theme.spacing(13),
40 | heght: theme.spacing(13)
41 | }
42 | }));
I have already imported makestyles from "#material-ui/styles". But it outputs the above error:
For your reference I would like to add the complete code I used:
import React from 'react';
import {makeStyles} from "#material-ui/styles";
import {
AppBar,
Toolbar,
ListItem,
ListItemIcon,
IconButton,
ListItemText,
Avatar,
Divider,
List,
Typography,
Box
} from "#material-ui/core";
import {
ArrowBack,
AssignmentInd,
Home,
Apps,
ContactMail
} from "#material-ui/icons";
import avatar from "../Assets/Images/avatar.png";
//CSS styles
const useStyles = makeStyles( theme =>({
menuSliderContainer:{
width: 250,
background: "#511",
height: "30rem"
},
avatar:{
display: "block",
margin: "0.5rem auto",
width: theme.spacing(13),
heght: theme.spacing(13)
}
}));
const menuItems = [
{
listIcon: <Home/>,
listText: "Home"
},
{
listIcon: <AssignmentInd/>,
listText: "Resume"
},
{
listIcon: <Apps/>,
listText: "Portfolio"
},
{
listIcon: <ContactMail/>,
listText: "Contact"
},
{
listIcon: <Home/>,
listText: "Home"
}
]
const Navbar = () => {
const classes = useStyles()
return (
<>
<Box component="div" className={classes.menuSliderContainer}>
<Avatar src={avatar} className={classes.avatar} alt="Pawara Siriwardhane"/>
<Divider/>
<List>
{menuItems.map((lstItem,key)=>(
<ListItem button key={key}>
<ListItemIcon>
{lstItem.listIcon}
</ListItemIcon>
<ListItemText/>
</ListItem>
))}
</List>
</Box>
<Box component="nav">
<AppBar position="static" style={{background:"#222"}}>
<Toolbar>
<IconButton>
<ArrowBack style={{color: "tomato"}}/>
</IconButton>
<Typography variant="h5" style={{color:"tan"}}> Portfolio </Typography>
</Toolbar>
</AppBar>
</Box>
</>
)
}
export default Navbar
I have already gone through the
already asked questions: Why Material-UI is not recognizing the theme.spacing function?
& the GitHub conversation: [Grid] Use a unitless spacing API #14099
but could not find a working answer.
It happens because you don't have a material-ui theme defined on your application. Then apply the default material ui theme, or your own theme. It can be done in two ways:
Wrap your application with ThemeProvider component
Export makeStyles hook from #material-ui/core/styles instead of #material-ui/styles, in order to have the default theme.
I would like to add to previous answer pointing out that another reason for this error, once migrated from Material UI 4.xto Material 5.x and so respectively have the import from #mui/styles, assuming one has created a style object, is that indeed as in your code you are referring to the theme object that is not present anymore as default e.g:
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8), // <-- this theme as isn't defined will
// cause the error
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
}
if you would like to use theme default propeties then change that style to
import { makeStyles } from '#mui/styles';
import { useTheme } from '#mui/material/styles';
export default makeStyles(() => ({
paper: {
marginTop: useTheme().spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: useTheme().spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: useTheme().spacing(1),
},
},
According to the latest version of MUI, you should import makeStyles from #mui/styles.
Add a ThemeProvider at the root of your application since the defaultTheme is no longer available.
If you are using this utility together with #mui/material, it's recommended that you use the ThemeProvider component from #mui/material/styles
I'm using material-ui InputBase component to create a search bar and it shows an underline. However when I write the same code in another project there is no underline..
Any clues to what the problem might be?
Here is the code for the search bar
import React from 'react';
import { IconButton, InputBase, Paper } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles'
import SearchIcon from '#material-ui/icons/Search'
const useStyles = makeStyles((theme) => ({
root: {
padding: '2px 4px',
display: 'flex'
alignItems: 'center'
width: 400
},
input: {
marginLeft: theme.spacing(1),
flex: 1,
},
iconButton: {
padding: 10
}
}));
export default function SearchBar() {
const classes = useStyles();
return (
<Paper className={classes.root}>
<InputBase
className{classes.input}
placeholder='Search..'
inputProps={{ 'aria-label': 'search' }}
/>
<IconButton
type='submit'
className={classes.iconButton}
aria-label='search'
>
<SearchIcon />
</IconButton>
</Paper>
)
}
I am trying to center the contents of the Pagination. However, this does not work. On console, I need to justify the ul wrapper and I can not find any information on MUI site related to the pagination props or a guide on how to center the item.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Pagination from '#material-ui/lab/Pagination';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
marginTop: theme.spacing(2),
},
},
pagination: {
alignItems: 'center',
justify: 'center',
}
}));
const Paginated = (props) => {
const classes = useStyles();
return (
<div className={classes.root}>
<Pagination className={classes.pagination} count={props.totalPage} color='primary' />
</div>
);
};
export default Paginated;
and I have been trying on codesandbox as well. https://codesandbox.io/s/material-demo-zv1ps?file=/demo.js
Is there any way I can do this without having an additional box or Grid wrapper to wrap it out?
root: {
"& > *": {
marginTop: theme.spacing(2),
justifyContent:"center",
display:'flex'
}
}
We can also use Stack component:
import Stack from '#mui/material/Stack';
<Stack alignItems="center">
<Pagination className={classes.pagination} count={props.totalPage} color='primary' />
</Stack>
margin: "auto" worked for me
root: {
margin: "auto",
},
I got the idea from here: 4 ways to center a component in Material-UI
When I see MUI's default AppBar, its children looks so apart especially in wide screen size. The logo is located completely left, and other navs is located too much right. So Items look so apart each other.
What I want to do is like Bootstrap's component, I want to apply maximum width like below image. How do I set container within AppBar?
This is what I tried.
<AppBar>
<ToolBar>
<Grid
container
style = {{ maxWidth: 1170 }}
>
<Typography>Logo</Typography>
</Grid>
</ToolBar>
</AppBar>
But it's not worked...
You may try using
<CssBaseline />
<AppBar position="static">
<Container maxWidth="lg">
<ToolBar>
<Typography>Logo</Typography>
</ToolBar>
</Container>
</AppBar>
This is how I do it:
import AppBar from "#material-ui/core/AppBar";
import { makeStyles } from "#material-ui/core/styles";
import Toolbar from "#material-ui/core/Toolbar";
import React from "react";
const useStyles = makeStyles(() => ({
toolBar: {
margin: "auto",
maxWidth: 800,
width: "100%"
},
}));
export default function() {
const classes = useStyles();
return (
<AppBar>
<Toolbar className={classes.toolBar}>
{...}
</Toolbar>
</AppBar>
);
}
You can try this:
function MyAppbar() {
const classes = makeStyles(theme => createStyles({
root: {
flexGrow: 1,
},
appBar: {
display: 'flex',
justifyContent: 'center',
flexDirection: 'row'
},
toolBar: {
width: '100%',
maxWidth: 1170
}
}))()
return (
<div className={classes.root}>
<AppBar position="static" className={classes.appBar}>
<Toolbar variant="dense" className={classes.toolBar}>
...
</Toolbar>
</AppBar>
</div>
)
}
You can try to use withStyles that is built in material-ui
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import { AppBar, ToolBar, Grid, Typography } from '#material-ui/core';
const styles = {
toolbar: {
maxWidth: 1170
}
}
class App extends React.Component {
render() {
return (
<AppBar>
<ToolBar
className={this.props.classes.toolbar}
>
<Grid
container
>
<Typography>Logo</Typography>
</Grid>
</ToolBar>
</AppBar>
)
}
}
export default withStyles(styles)(App);