Develop Reference

how to add icon to Autocomplete TextField MUI v5 in Reactjs?

Well, I made an autocomplete using the code below and tried to display its icon after selecting each item, but it didn't work!
import { useState } from 'react'
import { TextField,InputAdornment ,Autocomplete,Box} from '#mui/material';
import v1 from './v1.svg';
import v3 from './v2.svg';
import v4 from './v3.svg';
import v4 from './v4.svg';
function App() {
const [useicon ,setUseicon]=useState(v1);
const options=[
{'label':"تتر","icon":v1},
{'label':"بایننس",'icon':v2},
{'label':"بی اس دی",'icon':v3},
{'label':"دای",'icon':v4},
]
return (
<div>
<Autocomplete
options={options}
getOptionLabel={(option) => option.label}
onChange={(e,value)=>{setUseicon(value['icon'])}}
sx={{width:"300px"}}
renderOption={(props, option) => (
<Box component="li" {...props}>
<img src={option.icon} style={{width:"50px",height:"50px"}} alt={option.label} />
{option.label}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
startAdornment: <InputAdornment position='end'>
<img src={useicon} />
</InputAdornment> ,
}}
/>
)}
/>
</div>
)
}
export default App;
some notes:
1-All the imports were correct and there is no problem
2-In the same way, the icon is shown in the TextField Component.
3-If there is a typo, know that it was in this post and not in the program itself
Please help because it is very important for me.

Replace inputProps with InputProps.
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position='end'>
<img src={useicon} />
</InputAdornment>
),
}}
inputProps is the attributes You apply to the input Dom element, but the InputProps is the properties that You assign to the MUI Input element.
More data Here.

Material UI add html to FormControlLabel

in my project I need to customize a checkbox with FormControlLabel. In this label I need to show name and code of an item one above another with lowered font size. I tried to add html markup to label or used Typography, but it did not work. The code is as follows:
<FormControlLabel
label={<Typography variant="subtitle2" style={{ color: 'black', fontSize: '10px' }}>{"name_here" + "<br />(\n also not working)" + "code_here"}</Typography>}
control={<Checkbox size="small"/>}
/>
Any ideas how to fix it would be welcome. Thank you.

You can achieve this by using the sx property in the FormControlLabel for MUI V5. Alternative ways is to use styled components, or if you want a global solution to use the MUI theme.
Below is a solution using the sx and here is the working codesanbox to play with
<FormControlLabel
value="top"
sx={{
".MuiFormControlLabel-label": {
fontSize: "10px"
}
}}
control={
<Checkbox
name="test"
value="test"
checked={true}
size="small"
inputProps={{ "aria-label": "controlled" }}
/>
}
label="Top"
labelPlacement="top"
/>
Alternatively, if you want to render a Typography component in side the label you can write similar as you did
label={
<Typography sx={{ fontSize: '10px' }}>
Label Text
</Typography>
}
or give any properties you want in the Typography component

How to change text color of disabled MUI Text Field | MUI v5?

I want to alter the font colour of disabled MUI TextField.
It should be black so that it is visible.
Here is code
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I removed underline for standard text Field. Now I want text color black when it is disabled.

Inspired by Madhuri's solution, you can also use the sx prop without importing styled:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "black",
},
}}
/>

You need to use ".Mui-disabled" class to override required css as below,
import TextField from "#mui/material/TextField";
import { styled } from "#mui/material/styles";
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}));
function App() {
return (
<>
<span>Disabled Input:</span>
<CustomDisableInput
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
value="your text"
InputProps={{ disableUnderline: true }}
disabled={true}
/>
</>
);
}
Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv

How would i get the selected from my autocomplete box using material ui library in react

Below is the code which uses an external library called material ui and implements a search box with autocomplete. when a value is selected a input tag gets created and has value:"selected value", how would i access the value to be able to do something with it.
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
class ContractsList extends React.Component {
render() {
const contracts = this.props.contracts;
return (
<div>
<div className="searchbar">
<h1>All Aboard</h1>
</div>
<div className="search-bar">
<Autocomplete
id="search-bar-id"
disableClearable
options={contracts.map(contract => contract.name)}
renderInput={params => (
<TextField
{...params}
label="Search contract"
margin="normal"
variant="outlined"
InputProps={{ ...params.InputProps, type: "search" }}
/>
)}
/>{" "}
</div>
</div>
);
}
}
export default ContractsList;
im trying to get the selected value from the input field but its not working

The onChange callback is being called once you change the value of the autocomplete (change of value is basically once you select/remove items from your list).
onChange={(ev, value) => {
console.log(value);
}}
Here is a working example as part of the autocomplete:
<Autocomplete
onChange={(ev, value) => {
console.log(value);
}}
id="combo-box-demo"
options={autoCompleteItems}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
You can see a codesandbox here.

Not able to change padding of material UI Select component

I'm struggling to override the default padding of the Select component to match the size of my other text fields. I understand that I need to modify nested components but have been unable to find a working solution.
<div className='wifi-chooser-column'>
<TextField
style={{margin: '6px'}}
label='SSID'
variant='outlined'
size='small'
/>
<Select
style={{margin: '6px', padding: '0px'}}
variant='outlined'
value={this.state.security}
onChange={(event) => this.setState({security: event.target.value})}
classes={{
select: {
padding: '10.5px 14px'
}
}}
>
<MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
<MenuItem value='WEP'>WEP</MenuItem>
<MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField
style={{margin: '6px'}}
label='Username'
variant='outlined'
size='small'
/>
<TextField
style={{margin: '6px'}}
label='Password'
variant='outlined'
size='small'
/>
Layout issue

According to the doc, there are several ways that we can override the material UI component styles.
If we want to override the padding of the Select components differently and occasionaly, or if this process would not be repeated in the entire project, we can simply use Overriding styles with classes approach. In this way, first we need to create our desired padding for Select component by makeStyles as below:
const useStyles = makeStyles((theme) => ({
rootFirstSelect: {
padding: "4px 0px"
},
rootSecondSelect: {
padding: "10px 80px"
}
}));
and then assign it to the classes prop of the component, by modifying the root element:
const classes = useStyles();
//Other part of the code
return (
//Other part of the code
<Select
classes={{ root: classes.rootFirstSelect }}
//other props
>
//Other part of the code
)
working sandbox example for this method
If we want to override the padding of the Select component for the whole project, Global theme variation would prevent repetition. In this way, we should create a theme by createMuiTheme, as below, and apply our desired changes there:
const theme = createMuiTheme({
overrides: {
MuiSelect: {
select: {
padding: "4px 0px 10px 130px !important"
}
}
}
});
then pass this theme as a prop to the ThemeProvider component which surround the whole project:
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>
working example in sandbox

I found an alternative way in the docs, that's easier to use for me: instead of using Select component, I use TextField with "select" props
cf: https://material-ui.com/components/text-fields/#select
<TextField
id="standard-select-currency"
select
label="Select"
value={currency}
onChange={handleChange}
helperText="Please select your currency"
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
Which allows you to access TextField props such as margin="none", margin="dense"