I'm facing issue where normal HTML img tag works just fine inside my Masonry List, but when I'm using Next.js Image Component with layout fill, it doesn't render anything.
My Styles:
const ImageList = styled('ul', {
columnCount: 3,
columnGap: 10,
display: 'block',
listStyleType: 'none',
overflowY: 'auto',
padding: 0,
margin: 0
})
const ImageListItem = styled('li', {
position: 'relative',
display: 'inline-block',
lineHeight: 0,
height: 'auto',
marginBottom: 10
})
HTML Skeleton:
<ImageList>
{detailImage.map((image, idx) => {
return (
<ImageListItem key={`_${idx}`}>
<Image
src={image.src}
alt={image.alt}
blurDataURL={image.blurDataURL}
placeholder={'blur'}
layout={'fill'}
objectFit={'cover'}
/>
{/* <img
src={image.src}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/> */}
</ImageListItem>
)
})}
</ImageList>
EDIT
Because I'm getting all images from CMS and have width/height I used the padding-top trick to create box and then I use next/image with object-fit: cover.
Code Example:
<ImageListItem key={`_${idx}`}>
<Box
css={{
display: 'inline-flex',
pt: `${100 / (image.width! / image.height!)}%`
}}
>
<Box css={{ position: 'absolute', inset: 0, m: 0 }} as={'figure'}>
<Image
src={image.src}
alt={image.alt}
blurDataURL={image.blurDataURL}
placeholder={'blur'}
layout={'fill'}
objectFit={'cover'}
/>
</Box>
</Box>
</ImageListItem>
When you use layout='fill' it's necesary a parent container for each image and this container needs to have position: relative;. Maybe it doesn't show anything because its parent elements don't have the width property.
This is the description in the documentation:
When fill, the image will stretch both width and height to the
dimensions of the parent element, provided the parent element is
relative. This is usually paired with the objectFit property. Ensure
the parent element has position: relative in their stylesheet.
I'm trying to get rid of the elevation shadow of the navbar over the sidebar.
I'm using Material-UI's AppBar for my NavBar component.
export default function NavBar() {
return (
<div>
<AppBar position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I am using a custom sidebar component,
.sidebar {
left: 0;
top: 64px;
height: 100vh;
width: 70px;
background-color: #3f50b5;
position: fixed;
}
.sidebar::before{
display: none;
}
I don't want to lose the elevation/shadow of the entire NavBar, just the section on the left where it's over the Sidebar.
Adding this because I spent a lot of timing finding a simple answer to removing the elevation.
The simplest way to remove the shadow is by adding elevation prop to the AppBar.
<AppBar position="fixed" elevation={0}>
you could add a ::after pseudo element to your navbar to do the job. This element would have the width of your sidebar, and would be have a top property accordingly to your navbar.
Given the AppBar itself has some different breakpoints you would need to change top accordingly:
const useStyles = makeStyles((theme) => ({
root: {
"&::after": {
position: "absolute",
content: '""',
width: "70px",
height: "8px",
top: "48px",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.down("xs")]: {
top: "56px"
},
"#media (orientation: landscape)": {
top: "48px"
},
[theme.breakpoints.up("sm")]: {
top: "64px"
}
}
}
}));
export default function NavBar() {
const classes = useStyles();
return (
<div>
<AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I created a sandbox with only the navbar, and a darker shadow to enhance contrast:
So I have my layout from Ant design and on the profile page theres one div at the top which has user's info.
Under it, there are many divs (one for each post), essentially mapping a post array into post divs.
Problem is, ive struggled with centring them to the middle of the page but after messing around with flex, i thought i did a good job in the end. It looked perfect at first when the user has no posts underneath the profile div. The moment there's posts, the profile div goes to the left alot for some goddamn reason.
The posts are perfectly centered like i want them but my problem is with the profile div. To fix it, i did a margin-left on the it. This makes it look perfect. But not so fast. Now when theres no posts, its awfully to the right cuz it was perfectly centered before the margin-left
So is there any way i can pass in a condition to say if posts.length === 0, and set the margin-left accordingly?
Losing my head.
Layout.js code:
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Network</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
{children}
</div>
</Content>
UserProfile.js code :
<div>
<div className="site-card-wrapper" style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
<Row gutter={16} type="flex" style={{justifyContent: "center", }}>
<Col span={16}>
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
<div style={{display:"flex", justifyContent: "space-between"}}>
<CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
<CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
</div>
</Card>
</Col>
</Row>
</div>
{
(userPosts.length > 0) ?
<Heading>Posts</Heading> :
<Heading>No posts yet</Heading>
}
{
userPosts.map(post => {
return <SinglePost key={post.id} post={post} />
})
}
</div>
SinglePost.js code (simplified):
<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
<Row gutter={16} type="flex" style={{justifyContent: "center"}}>
<Col span={16} >
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
<div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}>
{post.content}
</div>
<Likes>{likes} Likes</Likes>
</Card>
</Col>
</Row>
</div>
<div className="site-card-wrapper"
style={
{display: "inline-block",
marginBottom:20,
width: 500,
marginLeft:posts.length === 0 ? 0 : 355
}}>
use above conditional statement to handle run time marginLeft
I want to create this view. I am using react. Using bumbag for theming. The part I am struggling right now is to Overlap the balance card with that "+" Button.
My code so far is
<Box
padding="major-2"
width="100vw"
height="25vh"
display="flex"
flexDirection="row"
gap="2em"
>
<Card width="100vw" height="17vh" borderRadius="1em">
<Box fontWeight="bold">৳ Balance</Box>
<Box textAlign="center" fontSize="3rem" fontWeight="bold" color={balanceTextColor}>
{balance.amount}
{balance.hasUnverrifiedLoad ? "+" : ""}
<sup style={{ fontWeight: "normal" }}>৳</sup>
</Box>
{/* <Button variant="circle">+</Button> */}
</Card>
<Box padding="major-1" display="flex" flexDirection="column" alignItems="center">
<Text>You can now earn with your wifi router</Text>
<Image src={process.env.PUBLIC_URL + "/down-arrow.png"} height="12vh" width="5vw"/>
</Box>
</Box>
Here Box,Card,Text,Image are from Bumbag. How Can I overlap the button with the bottom right of the card?
So far I was able to do this, without overlapping.
you can add those styling to the Button styles and adjust it to fit your styling
.card-button {
position: absolute;
bottom: -5px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 20px !important;
box-sizing: content-box !important;
}
I usually use styled-components to custom style my component. As for the answer for the question, please refer here:
https://codesandbox.io/s/sad-montalcini-0gw4j?file=/src/App.js
Please edit the css as per your requirement.
Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon.
I just built an "create new" component, which is a piece of material paper with a content add button on the top. Here is the code.
import React from 'react';
import Paper from 'material-ui/lib/paper';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import IconButton from 'material-ui/lib/icon-button';
const styleForPaper = {
width: '96vw',
height: '20vh',
margin: 20,
textAlign: 'center',
display: 'inline-block',
};
const styleForButton = {
'marginTop': '7vh',
};
const PaperToAddNewWidgets = () => (
<div>
<Paper style={styleForPaper} zDepth={2}>
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd/>
</IconButton>
</Paper>
</div>
);
export default PaperToAddNewWidgets;
It looks OK (make sure you are viewing it at full size), but the icon is too small. Then I opened the chrome dev tool, and saw the following html code.
<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0,0,0,0.16),
0 3px 10px rgba(0,0,0,0.23);border-radius:2px;width:96vw;height:20vh;margin:20px;text-align:center;display:inline-block;mui-prepared:;" data-reactid=".0.2.0.1.0"><button style="border:10px;background:none;box-sizing:border-box;display:inline-block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;padding:12px;width:48px;height:48px;font-size:0;margin-top:7vh;mui-prepared:;-webkit-appearance:button;" tabindex="0" type="button" data-reactid=".0.2.0.1.0.0"><div data-reactid=".0.2.0.1.0.0.0"><span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.0"></span><div style="position: absolute; font-family: Roboto, sans-serif; font-size: 14px; line-height: 32px; padding: 0px 16px; z-index: 3000; color: rgb(255, 255, 255); overflow: hidden; top: -10000px; border-radius: 2px; opacity: 0; left: -44px; transition: top 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; -webkit-user-select: none;" data-reactid=".0.2.0.1.0.0.0.1:0"><div style="position: absolute; left: 50%; top: 0px; transform: translate(-50%, -50%); border-radius: 50%; transition: width 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, height 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, backgroundColor 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 0px; height: 0px; background-color: transparent;" data-reactid=".0.2.0.1.0.0.0.1:0.0"></div><span style="position:relative;white-space:nowrap;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.1:0.1">Add New Widget</span></div><svg style="display:inline-block;height:24px;width:24px;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;fill:rgba(0, 0, 0, 0.87);mui-prepared:;-webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10.0"></path></svg></div></button></div>
Using chrome dev tool, I revised the svg icon size and the viewbox property of svg and made the icon larger in browser. But I am not sure how I can resize the icon size in my code. If I write a CSS file to revise the svg it will be problematic if there are more than one svg elements.
do this
<SomeIcon className="svg_icons"/>
.svg_icons {
transform: scale(1.8);
}
just use scale :D it works
Note: iconStyle prop is no longer supported on IconButton Material UI making this answer obsolete
You have to set the size of the icon in the iconStyle prop in <IconButton>. Example below from the material-ui docs.
From my experience, if you set just the height or the width, nothing happens--only seems to work when you set height & width to the same value.
import React from 'react';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
const styles = {
largeIcon: {
width: 60,
height: 60,
},
};
const IconButtonExampleSize = () => (
<div>
<IconButton
iconStyle={styles.largeIcon}
>
<ActionHome />
</IconButton>
</div>
);
No. Most of the other answers are unsatisfactory and are poor practice, at least in 2021. This answer is literally answered in the documentation here and doesn't require any CSS hacks to get working.
In MUI, the Button and IconButton components are just essentially wrappers that nest the child Icon element in an <a> or <Link> (react-router) element. They don't have any intrinsic control over the size. Thus, to increase the button size, just increase the size of the Icon child of IconButton using the fontSize property. This will automatically make the button larger.
For instance, to make the IconButton below larger:
<IconButton>
<Icon />
</IconButton>
We just increase the size of the Icon child directly.
<IconButton>
<Icon fontSize="large" />
</IconButton>
However, this is largest size you can specify with the fontSize property. To go even larger, we must configure the CSS font-size property manually.
<IconButton>
<Icon style={{ fontSize: 60 }} />
</IconButton>
Simple as.
EDIT: Apparently, for whatever reason, Button components have a size property that allows their size to be controlled, but IconButton components don't. I'm not sure why MUI is so inconsistent...
I faced the same issue while using the last React version (which is today v16.13.1) and Material-ui (which is today v4.9.14).
How I solved it?
By simply adding this style to the icon button
MyIconButton: {
'& svg': {
fontSize: theSizeIWant
}
}
Complete example
import React from "react";
import { makeStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
import DeleteIcon from '#material-ui/icons/Delete';
const useStyles = makeStyles((theme) => ({
deleteIcon1: {
'& svg': {
fontSize: 25
}
},
deleteIcon2: {
'& svg': {
fontSize: 50
}
},
deleteIcon3: {
'& svg': {
fontSize: 75
}
},
deleteIcon4: {
'& svg': {
fontSize: 100
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>fontSize: 25</h1>
<IconButton className={classes.deleteIcon1}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 50</h1>
<IconButton className={classes.deleteIcon2}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 75</h1>
<IconButton className={classes.deleteIcon3}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 100</h1>
<IconButton className={classes.deleteIcon4}>
<DeleteIcon />
</IconButton>
</div>
);
}
and the result will be:
Live running code
I created this codesandbox.
Hope this helps!
With the latest version of material-ui (3.1.0), you can change padding of IconButton and fontSize of SvgIcon to update the looks.
const styles = theme => ({
smallButton: {
padding: 6
},
largeButton: {
padding: 24
},
largeIcon: {
fontSize: "3em"
},
input: {
display: "none"
}
});
function IconButtons(props) {
const { classes } = props;
return (
<div>
<IconButton className={classes.smallButton} aria-label="Delete">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="Delete">
<DeleteIcon fontSize="large" />
</IconButton>
<IconButton className={classes.largeButton} aria-label="Delete">
<DeleteIcon className={classes.largeIcon} />
</IconButton>
</div>
);
}
Live demo
You could just use the fontSize attribute on the child node of IconButton element, that is, in your case - ContentAdd node.
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd fontSize="large" />
</IconButton>
There are 4 options available - inherit, default, small and large.
Source - https://material-ui.com/api/icon/#props
When you need that for your global project you might add a new variant to your MUI theme.
components: {
MuiSvgIcon: {
variants: [
{
props: { fontSize: 'huge' },
style: {
fontSize: '5rem',
},
},
],
},
}
In order to get it worked for TS, you might need to extend the module declarations:
declare module '#mui/material/SvgIcon' {
interface SvgIconPropsSizeOverrides {
huge: true;
}
}
usage:
<HomeIcon fontSize="huge" />
I also wrote a little post on dev.to
this worked for me
fontSize="large"
<Badge badgeContent={4} color="primary" >
<CameraAltIcon fontSize="large" />
</Badge>
look Props --> fontSize
https://material-ui.com/api/icon/
For the current version of MUI (v5.8.5) there is a fontSize prop on the icons with different set sizes of 'small', 'medium', 'large' so you could do something like:
<HomeIcon fontSize="small" />
If one of those set sizes doesn't fit your needs there is also the option to use 'inherit' if you'd like it to match the font size of the container it is in and not have its own separate size.
Lastly, you could use the sx property which MUI places on all its components and in there it will accept the fontSize property which allows you to set the size directly to the icon. For instance:
<WhatshotIcon sx={{ fontSize: 140 }} />
https://mui.com/material-ui/icons/#size
There are two ways of enlarging the svg, one is to override the style with iconStyle, the other is to edit the code found in https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js
Note: ContentAdd imports from SvgIcon
const mergedStyles = Object.assign({
..
height: 24, // <-- change default height
width: 24, // <-- change default width
..
}, style);
return (
<svg
{...other}
..
style={prepareStyles(mergedStyles)}
..
>
I am using IconStyle prop to change the size of svg icon.
<IconButton
tooltip="Add New Group"
tooltipPosition="top-center"
style={{padding: 0, height: 0}}
iconStyle={{height: 31, width: 48}}
onClick={e => this.openNewList()}
disabled={!this.state.newAvailable}>
<ActionHome />
</IconButton>
There is always simple things to do
give an classname to your material ui icon
And go to your css file and give
height:40px !important and width 40px !impoetant
If className={ classes.classname } , fontSize : '40px' , size= 'large' etc not working then try it inline styling, you can give your height and width size as per required
<OpenInNewIcon style={{ height: '18px', width: '18px' }} />
I hope it will work,
Resize using
fontSize
<Box sx={{ fontSize: '2rem' }}>
<CloseIcon sx={{ fill: 'white', fontSize: 'inherit', mt: 0.375 }} />
</Box>
width orheight
<Box sx={{ width: '15vw' }}>
<CloseIcon sx={{ fill: 'white', width: '100%', height: '100%', mt: 0.375 }} />
</Box>
assuming you using Sass:
.divWithTargetSVG {
.MuiSvgIcon-root {
font-size: Xrem/px;
}
}
This is how I solved my problem with the SVG icon size. I also needed to be smaller when I hit the 768 media query break point.
import { withStyles } from '#material-ui/core/styles';
import { TextField, IconButton } from '#material-ui/core';
import CloseIcon from '#material-ui/icons/Close';
const StyledCloseIcon = withStyles(theme => ({
root: {
fontSize: 35,
[theme.breakpoints.down('768')]: {
fontSize: 19,
}
},
}))(CloseIcon);
use it here like this:
<StyledTextField
size='small'
fullWidth
id="standard-bare"
variant="outlined"
InputProps={{ endAdornment: (<IconButton size='small'><StyledCloseIcon /></IconButton>), }} />
Hope it helps someone. Cheers!