I have a material-ui select component that presents a drop down of options to the user. The placeholder text shows as "select option" to tell the user to select the options they want. This is shown in light grey text, but because the text colour is so light it could be hard for colour blind people to read. Because of that I want to make the text colour darker but am not sure how. I don't want to make the placeholder one of the options within the dropdown if possible.
Code for the select component is:
<Select
options = {options}
isMulti
placeholder= "Select Options"
value = {this.selectedOptions"
onChange={this.changeH}
className = SelectOptionsDropDown
/>
Styling within the .css file is:
.SelectOptionsDropDown {
text-align: center;
margin: 10px;
}
This styling works fully
Can you try this approch?
<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={age}
onChange={handleChange}/>
<MenuItem value="" disabled>
<em style={{color:"#9E9E9E"}}>Placeholder</em>
</MenuItem>
<MenuItem value={'A'}>Option A</MenuItem>
<MenuItem value={'B'}>Option B</MenuItem>
<MenuItem value={'C'}>Option C</MenuItem>
</Select>
You can use ::placeholder, like below :
.SelectOptionsDropDown::placeholder{
color: red;
}
Please note, it's not supported in IE, check here.
Related
I have autocomplete element,
the color property warning only works on focus,
any workarounds?
https://codesandbox.io/s/angry-jennings-jdqt1b?file=/demo.tsx
I wish the warning color will be all the time.
You have 2 options
First, just add focused prop in TextField
like this :
<TextField {...params} color="warning" label="Movie" focused />
Second, add a className to TextField and override label and input style
like this :
<TextField {...params} className="warningInput" color="warning" label="Movie" />
and styles:
.warningInput .MuiInputLabel-root {
color: #ed6c02;
}
.warningInput .MuiOutlinedInput-notchedOutline {
border-color: #ed6c02;
border-width: 2px;
}
on selecting the dropdown fields, my values are coming side by side instead of one below another.
MAZ and NAZ are two different items.
<Select
variant='outlined'
id='zone'
className="zone_select"
defaultValue={formik.values.zone}
onChange={(e) => handleInputChange("zone", e.target.value)}
disabled={isDisabled}
>
{zones && zones.map((zone) => (
<MenuItem
key={zone.id}
value={zone.id}
>
{zone.zone_name}
</MenuItem>
))}
</Select>
This is the code to display dropdowns.
Can someone suggest me a way to rearrange my dropdown value to row orientation
I want to use a dropdown menu of the material-ui components (see https://material-ui.com/components/selects/). Therefore, I copied the specific component out of the example:
Component
return <div>
<FormControl variant="outlined" className={classes.root}>
<InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
Plan
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>dsnfsdjfnsduifn</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Style
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(1),
minWidth: 120,
color: 'white',
borderColor: 'white'
},}));
Because of my app design, I want to change the color of this dropdown menu to white. At the moment the component looks like this:
As you can see in the component, the variant is outlined. As I understand the documentation (https://material-ui.com/api/select/) I have to overwrite the .MuiSelect-outlined class but I am not sure how I can do this. Unfortunately, the manual only describes the style of simple buttons and not how I can change the style of more complex components like these.
I hope someone can give me an example how I can change the color of the outline, the text and the arrow to white.
There you go
.MuiOutlinedInput-notchedOutline {
border-color: #fff;//for border color
}
.MuiSelect-icon {
color: #fff;// for icon drop down icon color
}
.MuiInputLabel-root {
color: #fff;// for lable color
}
For focus just add the parent .Mui-focused selector on these
const useStyles = makeStyles(theme => ({
select: {
borderColor: 'white'
},
fomrControl{
margin: theme.spacing(1),
minWidth: 120,
color: 'white',
}
}));
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"
I am using react material in react with select component.I want to add first disable option something like “please select item”
Implemented in html like this
<select name="tagging">
<option selected disabled>I'm working</option>
<option value="Option B">Option B</option>
<option value="Option C">Option C</option>
</select>
How I will achieve this using material + react
here is my code
https://codesandbox.io/s/6836mkjx3
<FormControl className={classes.formControl}>
<InputLabel htmlFor="searchCriteria">SEARCH CRITERIA *</InputLabel>
<Select
value={searchCriteria}
onChange={event => handleInput(event, "searchCriteria")}
input={<Input name="searchCriteria" id="searchCriteria" />}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Some important helper text</FormHelperText>
</FormControl>
here is select example in material
https://material-ui.com/demos/selects/
https://material-ui.com/demos/selects/#selects
This is what you are looking for
example is given in material ui documentation
You can implement it with
<MenuItem value="">
<em>None</em>
</MenuItem>
for standard material select and with <option value="" /> if you are using "native" material select.
Additionaly you can add disabled prop.
Codesandbox example forked from material-ui docs
use value="" for first option in material select.
<MenuItem selected disabled value="">
<em>None</em>
</MenuItem>
You need a label
import: import InputLabel from '#mui/material/InputLabel';
Component: <InputLabel id="demo-simple-select-disabled-label">Select one</InputLabel>