By default if nothing was picked label will be placed as placeholder(like in screenshot bellow).
<KeyboardDatePicker InputAdornmentProps={{
position: 'start'
}}
/>
Is there a way to shrink the label and keep placeholder empty? I tried adding InputAdornmentProps={{position: 'start'}} and it helped(in a screenshot bellow) except I do not need the icon to be at start, I need it to keep as it is, on right.
Is there a way to achieve it? I am using KeyboardDatePicker from https://material-ui-pickers.dev/api/KeyboardDatePicker
Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.
So what you need to do is simply add the required props from the TextField component to shrink the label. The result would look like this:
<KeyboardDatePicker InputLabelProps={{ shrink: true }} />
Related
I'm playing with material ui and build a project and I needed make a TextField with mask
with react-imask:
https://mui.com/en/material-ui/react-text-field/#integration-with-3rd-party-input-libraries
But I tried with OutlinedInput but the label crashes:
<FormControl variant="standard">
<InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
<OutlinedInput
value={values.textmask}
onChange={handleChange}
name="textmask"
id="formatted-text-mask-input"
inputComponent={TextMaskCustom as any}
/>
</FormControl>
Empty
Filled
Codesandbox box
https://codesandbox.io/s/problem-with-3rd-party-input-libraries-cygxss?file=/demo.tsx
Codesandbox result link:
https://cygxss.csb.app/
Is there any reason you don't just use a TextField with variant set to "outlined"?
The MUI example is just showing different methods of using their components and the FormControl composition is done in greater complexity within TextField.
Solution
<TextField
label="react-imask"
id="formatted-text-mask-input"
name="textmask"
value={values.textmask}
onChange={handleChange}
InputProps={{
inputComponent: TextMaskCustom as any
}}
/>
Brief Look at Form Control
It appears as though you have an OutlinedInput but are telling the FormControl it is "standard", fixing this puts the label in the right spot, but it does not properly break the border of the fieldset as intended.
If you need to manually control the composition of the individual parts (FormControl, InputLabel, OutlinedInput, etc) you can see how MUI compose TextField in GitHub.
I have the following code:
<TextField
fullWidth
InputLabelProps={{style:InputLabelStyle, shrink: this.props.value ===null? false:true}}//problem here
label={<><IoIcons.IoMdBusiness/> Name</>}
id="outlined-size-small"
value={selectedValue?.first_name}
color="primary"
InputProps={{readOnly: true}}
/>
I'm trying to "fix" a bug that makes the label overlap the text if this is placed programmatically. So It seems I have to activate the label property "shrink". So I'm trying to make it just activate it when the textfield has something inside, otherwise, shrink should be false. However, I don't know how to reference value inside the inputLabelProps property. this.props.value is not working.
I'm using MUI for the first time on a project. Trying to get InputAdornment to show a magnifying glass svg icon inside a TextInput. I'm following the example here: https://mui.com/components/text-fields/
Regardless of the content of the adornment, I cannot get anything to show up in the UI. In the inspector, the input adornment attribute looks like this endadornment="[object Object]"
My code is like this:
<TextField
defaultValue={''}
inputProps={{
placeholder: 'Search',
endAdornment: <InputAdornment position="end">any</InputAdornment>
}}
onChange={handleChange}
/>
Answered by cris_b in a comment. Turns out there is an InputProps prop and an inputProps prop on TextField.
The difference between the two according to the MUI text-field API documentation:
inputProps: object
Attributes applied to the input element.
InputProps: object
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
Everyone
I have been trying to implement an icon inside the TextField component at the start of it using material-ui.
I believe that the reader knows about the Material UI library. I stuck to using Version 4 for this project.
I did find a few things for achieving this and I did try it. But it's working on some conditional basis. That is if I try to style the notchedOutline of the TextField like giving it a borderRadius or something the icon is not getting visible. Though after inspecting the element I do find it there. I did try to change the color and everything but nothing is working.
Here is what I need :
Image Describing my need
and here is what I am getting:
The coded output image
And here is the code that I have tried.
import {....,TextField,InputAdornment } from "#material-ui/core";
.........
<TextField
variant="outlined"
InputProps={{
startAdornment: (<InputAdornment position="start"><img src={someImage} /></InputAdornment>)
}}
classes={{
root classes.textField,
}}
fullWidth
/>
........
Can someone please help me in solving the same.
Thank you!!
There's something wrong with the image you use as a child inside <InputAdornment/> component. Make sure you import it correctly. However, according to docs, <InputAdornment/> expects as child - The content of the component, normally an IconButton or string.
Therefore, you should install #material-ui/icons package and use their icons instead on an img :
import MailIcon from '#material-ui/icons/Mail';
...
InputProps={{
startAdornment: <InputAdornment position="start"><MailIcon/></InputAdornment>,
}}
Demo
I have a problem, and I don't know how to solve it!
I am using react with material-ui, the background color of the site is dark and when I put a Date type TextField the icon appears in black which makes it difficult to see!
Does anyone know how I can change the icon color to white?
EDIT:
Here is my code extract
<TextField
id="date2"
label="Data fim"
type="date"
className={classes.margRight2}
value={this.state.EndDate}
onChange={this.handleChange('EndDate')}
InputLabelProps={{ shrink: true, }}
/>
As I'm checking Material-UI uses SVG icons, so you can change its colour by using the "color" CSS property to the svg tag.
Check this Codesandbox for my solution: https://codesandbox.io/s/material-ui-date-picker-nnzgv?fontsize=14&hidenavigation=1&theme=dark
Pay attention to the styles in "index.html" and the "demo.js" line 60. I assign my datetime picker a class and then I use the svg selector to set the white color.
Hope it helps.