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;
}
Related
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
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'm using the autocomplete component, and finally, I finished the feature as I wanted but since this component is rendered in other pages as a widget I'm getting some weird issues with the styling since the page that renders my component is overriding/adding styles they have globally.
This is how it looks in my local:
And this is how it looks when I deploy it and I check it on one of the pages:
I've been working on this the whole day without success, but I found that the styles that are braking my component are these ones:
I'm using these styles to hide the outlined style of the textfield
const useStyles = makeStyles(theme => ({
root: {
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
}
}
}));
And this is how my autocomplete components look like
<Autocomplete
id="listings-filter"
multiple
disableCloseOnSelect={true}
freeSolo
clearOnBlur={false}
limitTags={5}
disableCloseOnSelect={true}
blurOnSelect={false}
options={options}
groupBy={(option) => option.key }
onInputChange={handleInputChange}
onChange={handleOptionSelection}
disableCloseOnSelect
getOptionLabel={(option) => option.value}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.value}
</React.Fragment>
)}
style={{ width: "100%" }}
renderInput={(params) => (
<TextField
id='autocomplete-input'
{...params}
margin={'dense'}
className={autocompleteClasses.root}
InputLabelProps={{
shrink: true
}}
variant='outlined'
label="Search listings by address, MLS or property name"
placeholder='Type the address, MLS or property name'
/>
)}
/>
I tried to add inputProps to the textfield and give the styles there but this didn't work at all, also tried adding the styles on the makeStyles part but I'm confused about how to get into the exact class I need with MUI style overrides, and since this looks that is related with generic input component and not with a material UI component, made me confuse even more.
I don't know if this is possible with react or I have to build a CSS file to be able to avoid this behavior. Really appreciate any help!
EDIT:
Also tried using the inputProps of the TextField component leaning on another stackoverflow question but that make the autocomplete component to crash when the input is clicked with the following error -> Uncaught TypeError: Cannot read property 'focus' of null
const useStyles = makeStyles(theme => ({
root: {
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: 'none !important',
outline: 'none'
}
},
input: {
border: '10 !important',
borderColor: 'red',
boxShadow: 'unset !important',
color: 'red'
}
}));
renderInput={(params) => (
<TextField
id='autocomplete-input'
{...params}
margin={'dense'}
className={autocompleteClasses.root}
InputLabelProps={{
...params.InputLabelProps,
shrink: true
}}
inputProps={{
...params.InputProps,
classes:{
root: autocompleteClasses.input,
}
}}
variant='outlined'
label="Search listings by address, MLS or property name"
placeholder='Type the address, MLS or property name'
/>
)}
I solved the issue by creating a scss file:
.autocomplete-component > div > div > input {
border: 0px !important;
border-color: white !important;
box-shadow: unset !important;
-webkit-box-shadow: unset !important
}
and used as a className on the autocomplete component:
import './listingStyles.scss'
<Autocomplete
id="listings-filter"
className={'autocomplete-component'}
multiple
disableCloseOnSelect={true}
freeSolo
clearOnBlur={false}
limitTags={5}
disableCloseOnSelect={true}
blurOnSelect={false}
options={options}
groupBy={(option) => option.key }
onInputChange={handleInputChange}
onChange={handleOptionSelection}
disableCloseOnSelect
... />
Hope this is useful for anyone!
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'm having a hard time applying a color to the indeterminate state of my checkboxes. When fully selected, the checkbox properly displays as the secondary color. Any suggestions on what I'm doing wrong to target the indeterminate state and change its color?
const styles = {
root: {
'&$indeterminate': {
color: 'red',
},
},
indeterminate: {},
};
...
<ListItem
dense
button
key={this.props.key}
className={this.props.className}
disabled={this.props.disabled}
onClick={this.props.onClick}
>
<Checkbox
indeterminate={this.props.indeterminate}
classes={{
root: classes.root,
indeterminate: classes.indeterminate,
}}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>
<ListItemText inset primary={this.props.text} />
{ hasChildren ? <ExpansionIcon onClick={this.onExpansionItemClick} /> : null }
</ListItem>
I did it this way based on the documentation here: https://material-ui.com/customization/overrides/#overriding-with-classes
Thanks for your help!
I've found the proper way to implement this. Instead of selecting the root and changing the color, you tell the Checkbox what icon to use and apply a class to the icon.
<Checkbox
indeterminate={this.props.indeterminate}
indeterminateIcon={<IndeterminateCheckBoxIcon className={classes.root} />}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>