Hello i'm trying to add padding custom css but this padding should appear on medium size.
I tried to use code like this but it doesn't work
<Grid container spacing={4} sx={md:{p:12}}>
Try change
sx to xs
And as demo on MUI official:
<Grid container spacing={2}>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
Related
I am using https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-mui which is a KotlinJS wrapper around Material UI for React.
I am trying to port the following code to Kotlin:
<Grid container spacing={3}>
<Grid xs="auto">
<Item>variable width content</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
The issue I am having is that I don't know how to set the value for the xs breakpoint.
Okay apparently this can be done by creating extension properties:
inline var GridProps.xs: Any?
get() = asDynamic().xs
set(value) = asDynamic().xs = value
(https://github.com/JetBrains/kotlin-wrappers/issues/1856)
Trying to display 3 items per row in a grid, using the MUI Grid component:
const itemStyle = {
backgroundColor: "red",
height: "300px",
};
function App() {
return (
<Grid container gap={1} spacing={1} direction={"row"}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
);
}
However, the 3rd item always goes to the next line. If I make it xs={3}, all 3 items will be on the same line but there's a bunch of extra space at the end of each row.
Created this in a fresh project without any themes. It works where there is no gap, spacing={1} doesn't do anything - all 3 items will have no space between them. I suspected it was because the number of columns didn't add up, so I tried
<Grid container gap={1} columns={14}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
But that just does the same thing as xs={3}.
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:
<AppBar position="static" className={this.props.classes.appBar}>
<Toolbar
style={{
margin: "0 auto",
width: "80%"
}}
>
<Link to="/">
<img src={logo} alt="logo" width="65" height="48" />
</Link>
<NavLink
to="/about"
className={this.props.classes.link}
activeClassName={this.props.classes.activeMenu}
>
How can I move NavLink to the right side? I tried with edge, but it does not work. It is only for ImageButton available.
One approach is to use a Grid container and wrap your components in Grid item as follows
<AppBar position="static">
<Toolbar
style={{
margin: "0 auto",
width: "80%"
}}
>
<Grid direction="row" justify="space-between" alignItems="center" container>
<Grid item>
<Link to="/">
<img src={logo} alt="logo" width="65" height="48" />
</Link>
</Grid>
<Grid item>
<NavLink
to="/about"
className={this.props.classes.link}
activeClassName={this.props.classes.activeMenu}
>
// the rest of the code goes here
</Grid>
</Grid>
</Toolbar>
</AppBar>;
The Grid component uses flex and can be configured to work as you need, in your case justify is set to space-between than means that the elements will be pushed to the margin of the container and separated by the space between them.
More on Grid and aligning items can be found in the documentation HERE
I have this code:
<Grid item xs={12}>
<Grid container spacing={8} >
<Grid item xs={3} ></Grid>
{ someState && <SomeComponent /> }
</Grid>
</Grid>
At the first render, someState will be always false and only when I change that state I will show SomeComponente but I need to have that Grid visible and empty, in other words, using the row space in the dom. I don't want it hidden. How can I do it? I tried by putting the Gridcomponent empty as I show in the code, but the Grid container isn't using that space.
const SomeComponent = () => (
<Fragment>
<Grid item xs={3}>
<Typography variant="body1">Title</Typography>
</Grid>
<Grid item xs={3}>
asdasdasd
</Grid>
</Fragment>
);
Try this:
<Grid item xs={3} >{someState && <SomeComponent />}</Grid>
This will create the Grid regardless of someState and will fill the space, after someState is thruthy.