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;
Related
Im trying to make react-speech-recognition write inside a text-field but for some reason it wont work. I think it has to do with the last line.
import React from 'react';
import Button from '#material-ui/core/Button';
import Checkbox from '#material-ui/core/Checkbox';
import CircularProgress from '#material-ui/core/CircularProgress';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import Paper from '#material-ui/core/Paper';
import InputLabel from '#material-ui/core/InputLabel';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
// import EventIcon from '#material-ui/icons/Event';
import SearchIcon from '#material-ui/icons/Search';
// import TodayIcon from '#material-ui/icons/Today';
import InputUnstyled from '#mui/base/InputUnstyled';
const Dictaphone = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
);
};
function updateInput(ish) {
document.setSearchField = "Rendering";
}
function SearchForm({ runSearch, setSearchField, setAuthorField, setVenue, setBeginDate, setEndDate, setShowGraph, show_loading }) {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
return (
<Grid container spacing={2}>
<Grid item xs={1} />
<Grid item xs={10}>
<Paper elevation={2}>
<div className="search-body">
<form onSubmit={runSearch}>
<Grid container spacing={2}>
<Grid item xs={12}>
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
<TextField
id="busca" label="Palavras-chave *"
type='text'
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />
I tried using value={transcript} in the text-field but it only will work after i write something after it. Example: i say "hello", it will write it in the text-field but it wont actually send "hello" until i write something with the keyboard after like "1". then it will send "hello1".
<TextField
id="busca" label="Palavras-chave *"
type='text'
value={transcript}
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />
I think it might work if you replace TextField with textarea including value={transcript} for the same.
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.
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 thought Material-UI grid items were just used for quick spacing fixes. My grid items are now showing up as cards? Would just like it to be invisible how it was, however the docs don't explain how to do this. Appreciate any help!
import React, { useState, useEffect } from "react";
import Grid from "#mui/material/Card";
import { Container, TextField, FormControl } from "#mui/material";
export default function MainPage() {
return (
<Container maxWidth="lg" style={{ height: "100vh" }}>
<Grid container>
<Grid item xs={12}>
<img
style={{ width: "800px" }}
src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
alt="half-title-1"
/>
</Grid>
<Grid item xs={12}>
<img
style={{ width: "800px" }}
src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
alt="half-title-2"
/>
</Grid>
</Grid>
</Container>
);
}
It's because you're importing a Card!
import Grid from "#mui/material/Card";
What it's supposed to be:
import Grid from "#mui/material/Grid";
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;