I want to remove the focus background color for the target dropdown
<Dropdown
options={branding}
fullWidth
id='Name'
placeholder='Name'
label='Name'
name='Name'
className='form-name-input name-textbox name-dropDown'
data-test='name-dropbox'
onChange={handleChange}
value={values.brand}
error={errors.brand}
style= {{
MuiSelect: {
select: {
"& .MuiSelect-select:focus": {
backgroundColor: 'transparent',
}
}
}}
}
/>
On focus i am getting the focus to white I need to change the color once drop down is removed, I d want to use inline styling only . want to remove backgroundColor in focus or set it to transparent for only this dropdown
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;
}
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
I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.
Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>
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 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.