I am using Material UI and I'm creating a form, I have a <Button> component inside that form Grid.
I want the button to take its regular width and height on md screens and above, but want to have it full width and a bit of extra padding-y on xs screens. But I'm not able to figure out how?
Full code: or view in codesandbox
import "./styles.css";
import Grid from "#mui/material/Grid";
import Button from "#mui/material/Button";
export default function App() {
return (
<Grid container spacing={2}>
<Grid item xs={12}>
<Button variant="contained">Submit</Button>
</Grid>
{/*
<Grid item xs={12}>
<Button fullWidth variant="contained">
Submit
</Button>
</Grid>
*/}
</Grid>
);
}
I was able to solve this by using the useMediaQuery[1] MUI hook as follows:
Full code: (sorry for not providing a code sandbox, but useMediaQuery doesn't work with the code sandbox for some reason)
import "./styles.css";
import Grid from "#mui/material/Grid";
import Button from "#mui/material/Button";
import useMediaQuery from "#mui/material/useMediaQuery";
export default function App() {
const isFullWidth = useMediaQuery((theme) => theme.breakpoints.only("sm"));
return (
<Grid container spacing={2}>
<Grid item xs={12}>
<Button fullWidth={isFullWidth} variant="contained">
Submit
</Button>
</Grid>
</Grid>
);
}
I don't know why all that was actually required, we should have some syntax as follows:
// this is not real, but just an example
<Button fullWidth={(theme) => theme.breakpoints.is("sm")} variant="contained">
anyways.
Related
I code exactly like in a current YouTube video, in the video the cards are shown in a row, in my case they are strangely as a column.
Why? Default should actually be in line. Even if I explicitly enter direction="row" in the grid container, it still doesn't help.
App.js
import "./App.css";
import TourCard from "./components/TourCards";
import Container from "#mui/material/Container";
import { Grid } from "#mui/material";
function App() {
return (
<div className="App">
<Container>
<Grid Container spacing={4} direction="row">
<TourCard />
<TourCard />
<TourCard />
<TourCard />
</Grid>
</Container>
</div>
);
}
export default App;
TourCards.js
import Paper from "#mui/material/Paper";
import { Grid, Typography } from "#mui/material";
import Logo from "../logo.svg";
const TourCard = () => {
return (
<Grid item xs={3}>
<Paper elevation={3}>
<img
src={Logo}
alt="logo"
clasName="img"
/>
<Typography>Nr.1</Typography>
</Paper>
</Grid>
);
};
export default TourCard;
Check the capital C in <Grid Container spacing={4} direction="row"> -- it should be a lower case c for example:
<Grid container spacing={4}>
<TourCard />
<TourCard />
<TourCard />
<TourCard />
</Grid>
It is the container prop that causes display: flex to be applied to the Grid container. Using improper case on a prop is the same as omitting it, as the props are case-sensitive.
Simplified reproduction of the error and correction: https://codesandbox.io/s/basicgrid-material-demo-forked-un6nk?file=/demo.js
I am working on a building a general layout for a web app. I have hit a problem I am not sure how to solve.
My Grid looks as follows:
What I want is that the each section inside the card start at the same point.
For example, the icons are ok as each their tops are aligned.
The titles are also ok as their tops are aligned.
However, the content text is not ok, as the tops are not aligned amongst the three cards.
In addition, the learn more buttons should also be aligned, and ideally stuck to the bottom of the card. As can be seen they all sit at different heights.
My code looks as follows:
HomeGrid.jsx:
import React, { useState, useEffect, Fragment } from 'react'
import { useStyles } from '../styles'
import SimpleCard from '../card/SimpleCard'
import { Grid, Container, Paper } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
import FindInPageIcon from '#material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '#material-ui/icons/AccountBalanceWallet'
const HomeGrid = () => {
const classes = useStyles()
return (
<Container disableGutters className={classes.homeGridContainer}>
<Grid
alignItems="stretch"
alignContent="center"
justify="center"
wrap="wrap"
container
spacing={10}
>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<QuestionAnswerIcon fontSize={'large'} />}
title={'Speak'}
content={'Speaking to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<FindInPageIcon fontSize={'large'} />}
title={'Finding someone like this example can be great'}
content={'Finding to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<AccountBalanceWalletIcon fontSize={'large'} />}
title={'No Fees Here'}
content={'No Fees shalt find thou'}
></SimpleCard>
</Grid>
</Grid>
</Container>
)
}
export default HomeGrid
SimpleCard.jsx:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Card from '#material-ui/core/Card'
import CardActions from '#material-ui/core/CardActions'
import CardContent from '#material-ui/core/CardContent'
import Button from '#material-ui/core/Button'
import Typography from '#material-ui/core/Typography'
import { CardActionArea, CardMedia } from '#material-ui/core'
import QuestionAnswerIcon from '#material-ui/icons/QuestionAnswer'
const useStyles = makeStyles({
simpleCard: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
})
const SimpleCard = (props) => {
const classes = useStyles()
return (
<Card style={{ height: '100%' }}>
<CardContent>
{props.icon}
<Typography variant="h6" component="h2">
{props.title}
</Typography>
<Typography variant="body1" component="p">
{props.content}
</Typography>
</CardContent>
<CardActions className={classes.actions}>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
)
}
export default SimpleCard
I already tried implementing this answer: enter link description here but as you can see it doesn't work.
Can someone please guide / help me out here?
using flex will solve the issue.
set flex style properties display:'flex', justiyContent:'space-between', flexDirection:'column' to Card component.
It'll shift buttons of all the Cards to the bottom of the card.
I have this piece of code and it should center the button vertically and horizontally, but the button is not centered vertically, and I don't know why?
Can anyone help me with that?
import React from 'react';
import Button from '#material-ui/core/Button';
import Grid from '#material-ui/core/Grid';
function App() {
return (
<Grid container direction="row" justify="center" alignItems="center" justifyContent="center">
<Grid item>
<Button variant="contained" color="primary">Hello</Button>
</Grid>
</Grid>
);
}
export default App;
Try this code.
import React from "react";
import Button from "#material-ui/core/Button";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Grid item>
<Button variant="contained" color="primary">
Hello
</Button>
</Grid>
</Grid>
);
}
export default App;
I need to disable a button in reactjs depending on a value taken from a different component.
In below component (main.js), I need to disable the Button. But This has to be disabled depending on a value taken from a value another component (upload.js)
export default function HorizontalLabelPositionBelowStepper() {
.
.
.
return (
<Grid container>
<Grid item lg="12" md="12" xs="12">
<div className={classes.root}>
<div>
<Grid container justify="center">
<Grid item md="1">
<Button // button I need to disable
variant="contained"
color="secondary"
onClick={handleNext}
endIcon={<NavigateNext />}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</Grid>
</Grid>
</div>
</div>
</Grid>
</Grid>
);
}
And this is the upload.js
// imports...
.
.
.
export default function ElevateAppBar(props) {
const [file, setFile] = useState('');
const [filename, setFileName] = useState('eg: employees.csv'); // this filename value should be passed to the component `main.js`
return (
<Grid container justify="flex-start">
<Grid container item lg="12" md="12">
<Grid item lg="4" md="4" xs="4">
<Form>
<Form.File id="custom-file" label={filename} custom />
</Form>
</Grid>
</Grid>
<Grid container justify="center">
<Button variant="contained" style={{backgroundColor: "lightgreen"}} endIcon={<CloudUpload />}>
Upload
</Button>
</Grid>
</Grid>
);
}
In the upload.js I have a variable with the name filename. I need to pass this value to the first component - that is main.js
so the logic could be like something (this is not reactjs syntaxes, this is just to give the idea on what I need to do):
if(filename_taken_from_upload_js == "eg: employees.csv"){
// disable the button
}else{
// enable the button
}
Can someone help, Please?
This could be a case for lifting state up : https://reactjs.org/docs/lifting-state-up.html#lifting-state-up
If this value could be used by other unrelated components, you should consider putting it in a global state, using Redux or Context API.
https://redux.js.org/faq/react-redux#react-redux
https://reactjs.org/docs/context.html#when-to-use-context
I have a simple react code. There is a material-UI Textfield.
When I click in the text box to enter data, the screen shakes. After entering data, I click outside, the box screen shakes. Do help me resolve this screen shaking. Thanks so much.
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
>
</TextField>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;
Just set onChange attributes of the Text Fields as follows and the shaking will go away.
import React, { useState } from 'react';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
const [name,setName] = useState("")
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
onChange={e => setName(e.target.value)}
/>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;