Change Color of Select Component's Border and Arrow Icon Material Ui

Change color of Select component's border and arrow icon Material UI

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>
    )
}

Material UI: How can I change the border color of the Select component?

Try this:

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
    },
  },
}));

Changing border color of Material-UI Select Component

That border is actually the work of your variant="outlined" FormControl. So you can target that element's border instead of the Select component

const useStyles = makeStyles({
  customOutline: {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "white"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
      <FormControl
        variant="outlined"
        classes={{ root: classes.customOutline }}
      >...</FormControl>
  );
}

Changing the arrow/icon colour material ui select

The material provides you, one class, for changing the color of that icon.

.MuiNativeSelect-icon {
   color: red
}

Change color of the IconComponent of Material UI's Select Component

You can do something like this.

 <LanguageIcon 
      htmlColor="white" 
      sx={{ position: "absolute", left: ".5rem",cursor:'pointer',zIndex:-1 }}
 />

Position absolute makes it easy to align the icon where you want but the icon becomes un-clickable. To solve this I added cursor:pointer which partially solved the issue but wasn't able to click yet. Hence I reduced the z-index.

Reducing the z-index works because, clicking on icon actually clicks the parent and then displays the options.

Change color of bottom border and dropdown arrow in Material UI Autocomplete

Add color to the following CSS classes.

.MuiSvgIcon-root {
  color: white;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:before {
  border-bottom-color: white !important;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:after {
  border-bottom-color: white !important;
}

Play around with the code here

I used red color in my codesandbox example so that it can be visible on white screen
Sample Image

How to change material UI select border and label

Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline), label (MuiInputLabel-root), and selected item text (MuiOutlinedInput-input) for default, hover, and focused states.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField outlined

Change Color of Select Component's Border and Arrow Icon Material Ui