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
Related
import { Container } from "#mui/material";
import * as React from "react";
import { Home } from "#mui/icons-material";
import PersonIcon from "#mui/icons-material/Person";
import FormatListBulletedIcon from "#mui/icons-material/FormatListBulleted";
import CameraAltIcon from "#mui/icons-material/CameraAlt";
import OndemandVideoIcon from "#mui/icons-material/OndemandVideo";
import PhoneAndroidIcon from "#mui/icons-material/PhoneAndroid";
import FeaturedPlayListIcon from "#mui/icons-material/FeaturedPlayList";
import StorefrontIcon from "#mui/icons-material/Storefront";
import SettingsIcon from "#mui/icons-material/Settings";
import LogoutIcon from "#mui/icons-material/Logout";
import Typography from "#mui/material/Typography";
import { styled } from "#mui/material/styles";
const StyledContainer = styled("div")(({ theme }) => ({
paddingTop: theme.spacing(10),
backgroundColor: theme.palette.primary.main,
height: "100vh",
color: "white",
[theme.breakpoints.up("sm")]: {
backgroundColor: "white",
color: "#555",
border: "1px solid #ece7e7",
},
}));
const Item = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "Pointer",
},
}));
const Icon = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
//I need to change the Icon size
//fontSize:"18px" but this not working
},
}));
const Text = styled("div")(({ theme }) => ({
fontWeight: 500,
fontSize: "300px",
[theme.breakpoints.down("sm")]: {
display: "none",
},
}));
function Leftbar() {
return (
<StyledContainer>
<Container>
<div>
<Item>
<Icon>
<Home />
</Icon>
<Text>
<Typography>Homepage</Typography>
</Text>
</Item>
</div>
<div>
<Item>
<Icon>
<PersonIcon />
</Icon>
<Text>
<Typography>Friends</Typography>
</Text>
</Item>
</div>
</Container>
</StyledContainer>
);
}
export default Leftbar;
This is my sidebar code. and this is the screenshot of the page.
Here I need to change the sidebar icon sizes. But the problem is I unable to change the Icon sizes in breakpoints. This is the code of that breakpoint.
const Icon = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
//I need to change the Icon size
//fontSize:"18px" but this not working
},
}));
I tried several times to solve this problem. But I didn't get a solution. So if anyone knows how to solve this problem, Please help me. Thank you
[![enter image description here][2]][2]
You need to select svg to apply font size.
Try this
[theme.breakpoints.up("sm")]: {
'& svg': {
fontSize: 18
}
},
I am new to React and material UI. I am using material UI button and I want to remove default button classes (MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-buttonCss-3). I want to use only my class 'buttonCss'. Please can anyone help me to fix this.
My code is below -:
import { TextField } from '#material-ui/core';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles'
import { Form, Formik } from 'formik';
import * as React from 'react';`enter code here`
const useStyles = makeStyles((theme) => ({
container: {`enter code here`
maxWidth: "100vw",
maxHeight: "100vh",
display: "flex",
alignItems: "flex-start",
justifyContent: "space-evenly",
flexWrap: 'wrap'
},
mybox: {
width: 300,
backgroundColor: theme.palette.success.main,
color: "white",
padding: theme.spacing(1),
borderRadius: 4,
boxShadow: theme.shadows[10]
},
buttonCss : {
backgroundColor: theme.palette.success.dark
},
deafult: {
color: 'red'
}
}));
// implementing button this way
<Button className={classes.buttonCss} >Submit</Button>
You can't remove the default class and then continue using MaterialUi, now just use the default html button .
If you want only to customise, now just use
const useStyles = makeStyles({
root: {background: "red}
});
export default () => {
const classes = useStyles();
return <Button className={classes} >Submit</Button>
}
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 datepicker in a React project. I've created a calendar + time selection (code below). For some reason when I test this on Chrome desktop using the device toolbar to emulate iphone 8 it works fine, but when I go to the site on my actual iphone 8, the UI is broken (images below). Any thoughts?
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import moment from 'moment';
import { MuiPickersUtilsProvider, DatePicker } from '#material-ui/pickers';
import DateFnsUtils from '#date-io/date-fns';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexDirection: 'row',
padding: theme.spacing(3),
[theme.breakpoints.down('sm')]: {
padding: 0,
},
},
picker: {
display: 'flex',
flexDirection: 'row',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
timeContainer: {
display: 'flex',
flexDirection: 'column',
marginLeft: theme.spacing(2),
overflowY: 'scroll',
[theme.breakpoints.down('sm')]: {
alignItems: 'center',
marginLeft: 0,
marginBottom: theme.spacing(3),
},
},
timeButton: { width: 226, height: 50 },
}));
export default function Timesgrid(props) {
const classes = useStyles();
const [selectedDate, setSeletedDate] = useState(moment());
const disableDay = date => {
const formattedDate = moment(date).format('YYYY-MM-DD');
return formattedDate in props.availability &&
props.availability[formattedDate].length > 0
? false
: true;
};
const handleDateChange = date => {
setSeletedDate(moment(date));
};
const renderTimes = () => {
const dateStr = moment(selectedDate).format('YYYY-MM-DD');
const availability = props.availability[dateStr];
return availability && availability.length ? (
<div className={classes.timeContainer}>
{availability.map((time, i) => (
<Button
style={{ marginTop: i === 0 ? 0 : 10 }}
key={time}
className={classes.timeButton}
variant="outlined"
color="primary"
onClick={() => props.onDatetimeSelected(moment(time))}
>
<b>{moment(time).format('LT')}</b>
</Button>
))}
</div>
) : (
<Typography variant="h6" className={classes.timeContainer}>
No availability
</Typography>
);
};
const renderPicker = () => {
return (
<div className={classes.picker}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
disablePast
shouldDisableDate={disableDay}
variant="static"
defaultValue={selectedDate}
value={selectedDate}
onChange={handleDateChange}
/>
</MuiPickersUtilsProvider>
{renderTimes()}
</div>
);
};
return <div className={classes.root}>{renderPicker()}</div>;
}
Timesgrid.propTypes = {
availability: PropTypes.object.isRequired,
onDatetimeSelected: PropTypes.func.isRequired,
};
The answer to your question as we discussed in comments was to add the following CSS styling.
overflow: scroll
height: 100%
Justification:
The reason I suggested this solution was due to the comparisons in your images. The popup screen for the component was mushed together on the native browser popup but, not on the Chrome DevTools popup. This indicated that the native browser container was not allowing for overflow to occur.
Setting the height of the component to 100% ensures that it takes up the full height of it's container and allowing overflow ensures that if your component is greater than 100% of the containers height that it will render as shown in the devtools view.
Furthermore, In your reply you said your solution was
overflowY: scroll,
height: 100%
and overflow: scroll allows for overflow on both axes. Since the x-axis doesn't require overflow, this is a better solution.
Glad to see it worked.
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>
)
}