Hello I tried implementing Material UI Autocomplete component to use it as a search input. I used styled function from "#mui/material/styles" and added some custom CSS but when the page first loads you can see the CSS code instead of the actual component for a split second before appearing. Here is a screenshot of the problem:
The source code appears for a split second on the first load of the page before the Autocomplete component appears
Here is the Autocomplete component:
<Autocomplete
value={undefined || autoValue}
freeSolo
id="autocomplete"
autoHighlight={true}
autoSelect={true}
autoComplete={true}
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
disableClearable
// className="w-full"
fullWidth
options={items.map((item: string) => ({
url: item,
title: makeTitle(item),
}))}
getOptionLabel={(option: any) => option.title || ""}
renderOption={(props, option: Item) => {
return (
<li
key={option.url}
className=" hover:bg-slate-200 "
onClick={handleOptionClick}
>
<Link
href={`/calculators/${option.url}`}
className="block p-4 w-full"
>
{makeTitle(option.title)}
</Link>
</li>
);
}}
renderInput={(params) => (
<SearchTextField
{...params}
ref={textInput}
// onChange={(e) => console.log(e.target.value)}
// value="Hello"
variant="outlined"
// onChange={handleChange}
InputProps={{
...params.InputProps,
type: "search",
startAdornment: (
<InputAdornment position="start">
<SearchIcon style={{ color: "white" }} />
</InputAdornment>
),
}}
/>
)}
/>
And here is the CSS:
const SearchTextField = styled(TextField)({
"& .MuiInputBase-root": {
backgroundColor: "rgb(40,80,170)",
"&:hover": {
backgroundColor: "rgb(36,69,159)",
},
"&.Mui-focused": {
backgroundColor: "rgb(36,69,159)",
},
},
// "& .MuiAutocomplete-input": {
// paddingLeft: "10px !important",
// },
"& .MuiInputBase-input": {
backgroundColor: "white",
borderRadius: `90px`,
paddingLeft: "16px !important",
},
"& label.Mui-focused": {
color: "white",
},
"& .MuiInput-underline:after": {
borderBottomColor: "white",
},
"& .MuiOutlinedInput-root": {
borderRadius: `90px`,
"& fieldset": {
borderStyle: "none",
borderRadius: `90px`,
paddingRight: "10px",
},
"&:hover fieldset": {
borderStyle: "none",
borderColor: "white",
},
"&.Mui-focused fieldset": {
borderStyle: "none",
borderColor: "white",
},
},
});
I've never seen CSS source code rendering on the browser tried looking in Material UI forums but could not find anything. It does not look to happen in mobile browsers only desktop.
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
const styles = makeStyles((theme) => ({
root: { margin: "0px 20px" },
textStyle: {
fontFamily: "Comfortaa",
},
container: {},
textField: {
fontFamily: "Comfortaa",
},
dropDownFormSize: {
width: "100%",
fontFamily: "Comfortaa",
},
optionDropdown: {
color: "black",
},
dropDownSelector: {
color: "black",
backgroundColor: "tomato",
},
nativeInput: {
opacity: "1",
},
}));
const MainTable: React.FC = () => {
const classes = styles();
<FormControl
classes={{
root: classes.dropDownFormSize,
}}
>
<Select
required
className={classes.dropDownSelector}
value={emotion[i]}
name="emotion"
onChange={handleChangeEmotion(i)}
classes={{
root: classes.optionDropdown,
select: classes.optionDropdown,
// using nativeInput here gives me error
nativeInput: classes.nativeInput,
}}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left",
},
getContentAnchorEl: null,
MenuListProps: {
className: classes.optionDropdown,
},
}}
placeholder="Select Something"
native={false}
>
<MenuItem
value=""
disabled
// className={
// classes.optionItems
// }
>
Select Emotion
</MenuItem>
{emotions.map((emotion, i) => {
return (
<MenuItem
key={i}
// className={
// classes.optionItems
// }
value={emotion}
>
{emotion}
</MenuItem>
);
})}
</Select>
</FormControl>;
};
I want to remove opacity from the .MuiSelect-nativeInput Class. When I try to override this class using the nativeInput rule, I get this error message :-
Object literal may only specify known properties, and 'nativeInput' does not exist in type 'Partial<ClassNameMap<SelectClassKey>>'. Eventhough, nativeInput rule is given in the documentation of Select API. I have tried to override it in the Theme file but again, I get the error that nativeInput does not exist. How can I remove the opacity from the MuiSelect-nativeInput class.
You can instead use a TextField rendered as a select input.
const useStyles = makeStyles({
root: {
"& .MuiSelect-nativeInput": {
opacity: 1,
},
},
});
<TextField
select
classes = {{ root: classes.root }}
/>
my material-ui text field is displaying the wrong width:
My styling:
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
input: {
backgroundColor: "white",
},
textfield: {
color: "white",
width: "400px",
marginBottom: theme.spacing(3)
},
textfieldLabel: {
color: "white",
}
}));
My components:
return (
<div>
<form className={classes.root} noValidate autoComplete="off">
<TextField className={classes.textfield} InputProps={{className: classes.input}} InputLabelProps={{className: classes.textfieldLabel}} id="url-textfield" label="URL" variant="standard"/>
</form>
</div>
);
I have tried the default styling of the documentation and even that doesn't work. What am i doing wrong?
I'm trying to use a Material UI Select component on a dark background:
But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:
const styles = theme => {
root: {
borderBottom: '1px solid white',
},
icon: {
fill: 'white',
},
}
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value={this.props.value}
inputProps={{
classes: {
root: classes.border,
icon: classes.icon,
},
}}
>
<MenuItem
value={this.props.value}
>
Foo
</MenuItem>
</Select>
)
}
}
However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.
With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:
const styles = theme => ({
select: {
'&:before': {
borderColor: color,
},
'&:after': {
borderColor: color,
}
},
icon: {
fill: color,
},
});
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value="1"
className={{classes.select}}
inputProps={{
classes: {
icon: classes.icon,
},
}}
>
<MenuItem value="1"> Foo 1</MenuItem>
<MenuItem value="2"> Foo 2</MenuItem>
</Select>
)
}
}
Not a very pretty solution to getting the right contrast, but it does the job.
Edit
The above answer is missing some code, and is also missing the hover color, as suggested by #Sara Cheatham. See updated hooks based solution:
const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
export const MyComponent = () => {
const classes = useStyles()
return (
<Select
className={classes.select}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
value='1'
>
<MenuItem value='1'> Foo 1</MenuItem>
<MenuItem value='2'> Foo 2</MenuItem>
</Select>
)
}
I don't know why setting the color of the border and icon got so complicated. In any case, the answer above didn't help me with setting the icon color. Eventually, I found the solution via this code:
text color: white
border: rgba(228, 219, 233, 0.25)
icon (arrow): white
<Select
// IconComponent={() => <ArrowDropDownIcon style={{marginRight:10,pointerEvents:'none'}}/>}
labelStyle={{ color: '#ff0000' }}
sx={{
color: "white",
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'.MuiSvgIcon-root ': {
fill: "white !important",
}
}}
labelId="select-filter-by-field-labe;"
id="select-filter-by-field"
value={'some value'}
>
</Select>
You can change the bottom border color with the following code. Hope this helps you.
const styles = theme => ({
select: {
"&:before": {
borderColor: "red"
}
}
});
const MySelect = ({ classes }) => (
<Select value="1" className={classes.select}>
<MenuItem value="1">Option 1</MenuItem>
<MenuItem value="2">Option 2</MenuItem>
<MenuItem value="3">Option 3</MenuItem>
</Select>
);
Example in CodeSandbox
You can change the border color and SVG icon color of a MUI <Select> component using the following declaration:
<Select
sx={{
height: '2.5rem',
color: 'white',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'white'
},
'& .MuiSvgIcon-root': {
color: 'white'
}
}}
>
You can access input (and the underline) like so:
<Select
autoWidth
classes={{
root: styles.root,
select: styles.select
}}
displayEmpty
input={
<Input
classes={{
underline: styles.underline
}}
/>
}
onChange={this.onChange}
value=""
>
select: {
'&:before': {
borderColor: 'var(--galaxy-blue)',
},
'&:hover:not(.Mui-disabled):before': {
borderColor: 'var(--galaxy-blue)',
}
},
<Select
className={classes.select}
value={selected}
onChange={this.handleChange}
>
This worked for me:
import {
FormControl,
InputLabel,
Select,
MenuItem,
OutlinedInput as MuiOutlinedInput,
} from "#material-ui/core";
const OutlinedInput = withStyles((theme) => ({
notchedOutline: {
borderColor: "white !important",
},
}))(MuiOutlinedInput);
const useStyles = makeStyles((theme) => ({
select: {
color: "white",
},
icon: { color: "white" },
label: { color: "white" },
}));
function Component() {
return (
<FormControl variant="outlined">
<InputLabel id="labelId" className={classes.label}>
Label
</InputLabel>
<Select
labelId="labelId"
classes={{
select: classes.select,
icon: classes.icon,
}}
input={<OutlinedInput label="Label" />}
>
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
</Select>
</FormControl>
);
}
This worked for me:
<Select
sx={{
"& .MuiSvgIcon-root": {
color: "white"
}
}}
>
I faced the same problem and I fixed it this:
I added the .css file into react file:
import './index.css';
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={selectedRegion}
onChange={handleChangeSelectOption}
label="region"
className="select-options-navbar-main-color"
>
{regionList.map((item)=>{
return <MenuItem key={item} value={item}>{item}</MenuItem>
})}
</Select>
and at the end the most important file .css file:
:root{
--select-options-navbar-main-color: white;
}
.select-options-navbar-main-color div{
color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::after {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color:not(.Mui-disabled):hover::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color svg{
fill: var(--select-options-navbar-main-color) !important;
}
There is a root class available in MUI documentation, we can easily override that, for arrow and border outline
<Select variant='outlined' sx={{'.MuiSelect-icon': {
color: 'white'
},
".MuiSelect-outlined":{
color: 'white'
}}}>