How to change color of arrow in TextField Select from material-ui

Question

I have a problem with changing color of my arrow icon in Material-ui TextField Select .

I give props:

icon: {
    fill: "white !important",
  },

But the color doesn't change. I've tried probably everything I've found on the inte.net. Input props with icon doesn't work.

<TextField
          id="outlined-select-currency"
          select
          label={label}
          name={this.props.name}
          className={classNames(this.props.classes.textField)}
          onChange={(e) => this.props.handleChange(e)}
          value={this.props.value}
          SelectProps={{
            MenuProps: {
              className: this.props.classes.menu,
              icon: "white !important"
            }
          }}
          InputLabelProps={{
            classes: {
              root: this.props.overrideCssLabel,
              focused: this.props.overrideCssFocusLabel,
              icon: {
                color: "white !important"
              }
            },
          }}
          InputProps={{
            classes: {
              root: this.props.overrideCssInputRoot,
              focused: this.props.overrideCssInputFocus,
              notchedOutline: this.props.overrideCssInputNotchedOutline,
              icon: this.props.icon
            },
            style: {
              color: this.props.color
            },
          }}
          margin="normal"
          variant="outlined"
        >
          {selectList.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>

Answer 1

This can be solved by using the classes part of SelectProps and passing them like so:

import React, { FunctionComponent } from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

type Props = {
  someProps: any
};

const useStyles = makeStyles({
  icon: {
    color: 'white',
  },
});

const CustomTextInput: FunctionComponent<Props> = ({
  ...someProps
}) => {
  const classes = useStyles();
  return (
    <TextField
      {...someProps}
      select
      SelectProps={{
        classes: { icon: classes.icon },
      }}
    />
  );
};

export default CustomTextInput;

See https://material-ui.com/api/select/ for a list of SelectProps and https://material-ui.com/api/select/#css for a list of CSS class names for classes

Answer 2

I tried all the ways finally i overright using style. it's css style so it's overright even you can use.important to (im not sure with color variable).

<HeartIcon color="primary" style={{ color: theme.palette.primary.main }} />

Here this is how i used icon in Textfield

<TextField
 placeholder="Type your message"
 endAdornment={(
  <InputAdornment position="end">
     <Box className="d-flex align-items-center">
     <IconButton
                      onClick={() => {
                        console.log('attachment..');
                      }}
                      sx={{ mr: -1.25 }}
                    >
                      <AttachIcon style={{ color: theme.palette.primary.main }} />
                    </IconButton>
                    <IconButton onClick={() => {
                      console.log('sent..');
                    }}
                    >
                      <HeartIcon color="primary" style={{ color: theme.palette.primary.main }} />
                    </IconButton>
                  </Box>
                </InputAdornment>
                )}
            />

Answer 3

Add this into sx prop also works:

'& .MuiSvgIcon-root': {
    color: 'white',
 }

Answer 4

<TextField
  select
  fullWidth
  label={t(Translation.PAGE_INPUT_RESULTS_TEST_MEASUREMENT_LIST_FIELD_NAME_RESULT)}
  sx={{
       "& .MuiSvgIcon-root": {
            color: (theme) => theme.palette.primary.main
        }
                  }}
                >

Answer 5

Just remove the quotes.

icon: {
    fill: white !important
  }