I started using #Mui for React and I used it to create the form but after I focused TextField I see the border linke on the below screen:
My code look like this:
<FormGroup>
<TextField
label="Description"
name="description"
multiline
rows={5}
fullWidth
value={data.description}
variant="standard"
onChange={onHandleChange}
/>
</FormGroup>
How remove that?
#Edit
I resolved my problem. Border around of this element appears becouse I has styles from Breeze
Normally this can be done via CSS as well.
input {
outline: none
}
You can change the styling (remove the underline) of TextField when it is focused with makeStyles using :after
In your case do the following :
import TextField from "#mui/material/TextField";
import FormGroup from "#mui/material/FormGroup";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
underline: {
"&&:after": {
borderBottom: "none"
}
}
});
export default function ComboBox() {
const classes = useStyles();
return (
<FormGroup>
<TextField
InputProps={{ classes }}
label="Description"
name="description"
multiline
rows={5}
fullWidth
value={data.description}
variant="standard"
onChange={onHandleChange}
/>
</FormGroup>
);
}
And if you want it with no border at all you can pass InputProps={{ disableUnderline: true }} to your TextField
Related
When using a Textfield as the first child of DialogContent:
export default function App() {
return (
<Dialog open={true}>
<DialogTitle>Hey</DialogTitle>
<DialogContent>
<TextField
fullWidth
id='name'
label={'Foo'}
name='name'
required
type='text'
value={'Bar'}
/>
</DialogContent>
</Dialog>
);
}
its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?
You can easily fix that issue by adding some margin to the TextField like the following.
sx={{ marginTop: 2 }}
Or you could wrap the TextField using Box inside the DialogContent like the following.
<Box p={1}>
<TextField
...
/>
</Box>
How to convert simple CSS into makeStyles for React?
I have added style to the TextField to make it stretchable vertically, by using the attribute resize. It is working, actually. Below is the original code I have that I need to refactor.
<div className="mb-4 stretchable">
<style>{"\
.stretchable textarea{\
resize:vertical;\
}\
"}
</style>
<TextField
multiline
label="取材メモ"
className={classes.meetingLogContent}
rows={8}
name='content'
value={meetingLogData.content}
onChange={handleChange}
variant="outlined"
fullWidth
/>
</div>
It is just that our client wanted the style I added to be converted into makeStyle. And it could not target the TextField and does not make it stretchable.
const useStyles = makeStyles(() => ({
meetingLogContent: {
resize: 'vertical',
},
}))
After that I instantiated it into classes.
const classes = useStyles()
And applied the newly instantiated variable to the textfield.
<TextField className={classes.meetingLogContent} />
Am I missing something here? Thanks in advance for your help.
You should apply resize to a div that contains TextArea and not to the TextArea itself. Something like:
<div className={classes.meetingLogContent}>
<TextField
multiline
label="取材メモ"
rows={8}
name='content'
value={meetingLogData.content}
onChange={handleChange}
variant="outlined"
fullWidth
/>
</div>
Then your useStyles:
const useStyles = makeStyles(() => ({
meetingLogContent: {
resize: 'vertical',
overflow: 'auto' //<-- don't forget overflow to auto
},
}))
The result is:
Here a codesandbox example.
If I enter One character and remove the focus, the Textfield breaks.
I guess mask problems
As shown in the picture
My code https://codesandbox.io/s/happy-blackwell-5sigw?file=/src/App.js:0-610
import { TextField } from "#material-ui/core";
import { IMaskMixin } from "react-imask";
import { useForm } from "react-hook-form";
const IMaskPhoneInput = IMaskMixin(({ ...props }) => {
return <TextField {...props} />;
});
export default function App() {
const {
register,
} = useForm();
return (
<div className="App">
<IMaskPhoneInput
autoFocus
fullWidth
mask={"+{7} (000) 000-00-00"}
color="primary"
label={"Телефон"}
placeholder={"+7 (950) 356-55-44"}
{...register("phone")}
/>
</div>
);
}
Have you tried including the shrink prop?
<TextField InputLabelProps={{ shrink: true }} />
This is per the documentation at https://mui.com/components/text-fields/ under limitations
Shrink
The input label "shrink" state isn't always correct. The input label is supposed to shrink as soon as the input is displaying something. In some circumstances, we can't determine the "shrink" state (number input, datetime input, Stripe input). You might notice an overlap.
To workaround the issue, you can force the "shrink" state of the label.
<TextField InputLabelProps={{ shrink: true }} /> or <InputLabel shrink>Count</InputLabel>
I'm currently working on several forms for an app and chose to use Material UI and React Hook Forms to build them. The basic functions are working, which means I can only proceed when all required inputs are filled and I'm getting the desired data.
Unfortunately I'm not able to use the form validation or display of error messages that comes with React Hook Form. It is still using the Material UI validation, even though I followed along to the documentation as close as possible.
Here's what I want to be able to do:
define the min and max length of an input
enter RegEx patterns for password inputs
show the neat looking error messages of React Hook Form
Some of the logic is working, some is not. Can you help me figure out why? Thank you in advance!
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Link } from 'react-router-dom';
// COMPONENTS
import Button from '../01-atoms/inputs/Button';
import Textfield from '../01-atoms/inputs/Textfield';
// MATERIAL UI - CORE
import Fade from '#material-ui/core/Fade';
import Grid from '#material-ui/core/Grid';
import InputAdornment from '#material-ui/core/InputAdornment';
import Typography from '#material-ui/core/Typography';
import Paper from '#material-ui/core/Paper';
// MATERIAL UI - ICONS
import LockSharpIcon from '#material-ui/icons/LockSharp';
import PersonAddSharpIcon from '#material-ui/icons/PersonAddSharp';
export default function SignUp({ i18n, submitSignUpData }) {
const { register, handleSubmit, control, errors } = useForm();
return (
<Grid item xs={12} sm={6} md={3}>
<Fade in>
<Paper elevation={3}>
<Typography align='center' gutterBottom variant='h5'>
{i18n.sign_up.page_title}
</Typography>
<form onSubmit={handleSubmit(submitSignUpData)}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Controller
// This is not working:
rules={register({
required: true,
minLength: 8,
})}
// But this is:
required
as={Textfield}
name='newPassword'
control={control}
defaultValue=''
fullWidth
label={i18n.login.password_placeholder}
variant='outlined'
type='password'
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<LockSharpIcon />
</InputAdornment>
),
}}
/>
{errors.newPassword && 'Your input is required!'}
</Grid>
<Grid item xs={12}>
<Button
fullWidth
content={i18n.sign_up.get_started_button}
variant='contained'
color='secondary'
type='submit'
endIcon={<PersonAddSharpIcon />}
/>
</Grid>
</Grid>
</form>
<Link to='/log-in'>
<Typography>{i18n.login.login_button}</Typography>
</Link>
</Paper>
</Fade>
</Grid>
);
}
Instead of using controller why don't you use TextField of Material UI. I have something like this in my code.
<TextField
name="newPassword"
label="Password"
inputRef={register({ required: true, minLength: 8 })}
defaultValue=''
/>
{
errors.newPassword &&
<ErrorText>
{errors.newPassword.type === "required" ?
'Password is required.' :
`Min character limit for Password is 8.`}
</ErrorText>
}
I'm use the library for input. But when use with Thai language, it need additional top padding to display word correctly as Thai has 2 level of vowel. For example, word like "ที่นั่น" will be cut on the top. Below is the code I use.
<Grid item xs={12} md={10}>
<TextField required id="name" label="Remark name" fullWidth />
</Grid>
When i put word "ที่นั่น" inside Textfield will display only this. I try various style to change this but not success.
Screencap run of the code
Thank you for all your comment. For my case, I found out that I need to put paddingTop in InputProps. So, the code I use is:
const styles = theme => ({
thaiTextFieldInputProps:{
paddingTop: '5px'
},
});
and then
<TextField
InputProps={{
classes: {
input: classes.thaiTextFieldInputProps
}
}}
label="Thai Remark"
fullWidth
/>
Since you are using MUI you can use their css wrapper function withStyles like this
const styles = theme => ({
name: {
paddingTop: '50px', // for example
},
});
and then
<Grid item xs={12} md={10}>
<TextField
className={classes.name}
required
id="name"
label="Remark name"
fullWidth
/>
</Grid>
After this you just need to wrapp your component in withStyles HOC:
export default withStyles(styles)(NameOfYourComponent);
To fix you problem need to update default styles:
Add class name for text field
<Grid item xs={12} md={10}>
<TextField
className="fix-thai" // <<<<<
required
id="name"
label="ที่นั่น"
fullWidth
/>
</Grid>
In you styles add this class and reset styles for input:
.fix-thai input {
height: 20px;
}
See live example:
I'm make pull request to fix it. With new release I think fixed it.