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.
Related
I'm trying to find which class i need to override to modify the bar color of the component:
Here's my code:
<Input
id="email"
type="email"
placeholder="Enter your email"
className='mr-10'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
The result is this:
What i want to do is edit the color of the bottom bar.
Does anyone know which class should i add to my sx{{}} prop to edit the color on focus?
Thanks for the help.
You should use <TextField /> for this. The variant prop will give you the design that you want.
<TextField
variant="standard"
sx={{
"& .MuiInput-underline:after": {
borderBottomColor: "green",
},
}}
/>
Note that there are other ways too, with styled or with theme, this is the fastest way to do it but may be not so scalable, so refer to the docs for more styling solutions.
Ref:
https://mui.com/material-ui/react-text-field/
https://mui.com/material-ui/guides/interoperability/#global-css
https://mui.com/material-ui/customization/theme-components/#global-style-overrides
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
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.
I am creating a form with Material UI. The form has two sections. One is the user's shipping address, and the other is the billing address. In many circumstances the latter is identical to the former, so I provide a checkbox to automatically fill out the billing address with the shipping address. It does so by calling a function that sets the to-be-updated field's value equal to the other field's value, which is saved in the React state.
The MUI Input component handles the fields themselves. The InputLabel component is also used to label them. Normally, when values are entered in a field the InputLabel text moves above the field like this:
However, when the checkbox is checked and the value is populated in the billing address field by typing in the shipping address field, the label fails to get out of the way:
I have been unable to solve the problem and no similar questions on Stack Overflow seem to resolve my issue. How do I fix this?
EDIT:
Here is the code from the screenshot:
<Grid container spacing={40} className={classes.formContainer}>
<Grid item xs>
</Grid>
<Grid item xs>
<FormControlLabel
control={
<Checkbox
checked={this.state.sameAddressScreen2}
onChange={this.handleSameAddressScreen2}
value="sameAddressScreen2"
/>
}
label="Same as Location Address"
/>
</Grid>
</Grid>
<Grid container spacing={40} className={classes.formContainer}>
<Grid item xs={6}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="locationStreetAddress1">Street Address 1</InputLabel>
<Input id="locationStreetAddress1" name="locationStreetAddress1" autoFocus value={this.state.locationStreetAddress1} onChange={this.handleChange} />
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="mailingStreetAddress1">Street Address 1</InputLabel>
<Input id="mailingStreetAddress1" name="mailingStreetAddress1" autoFocus value={sameValue('mailingStreetAddress1')} onChange={this.handleChange} />
</FormControl>
</Grid>
</Grid>
This is the state and the sameValue function that code invokes:
state = {
locationStreetAddress1: '',
mailingStreetAddress1: '',
sameAddressScreen2: false,
};
sameValue = (field) => {
if (this.state.sameAddressScreen2 === true) {
let stateKey = 'location'.concat(field.slice(7));
return this.state[stateKey];
} else {
return this.state[field];
}
}
The InputLabel component has a property called "shrink" - set this to true when the Input component has a value and you will get the desired behavior.
This problem is specified in the documentation itself.
https://mui.com/material-ui/react-text-field/#shrink
Use This
<TextField InputLabelProps={{ shrink: true }} />
Or
<InputLabel shrink>Count</InputLabel>