How to change color of material ui component element in react?

Question

React

I'm trying to change the color of the svg arrow and underline text on hover, I just can't figure out how to change the default style.
Codesandbox

Answer 1

const ThemedInput = withStyles((theme) => ({
  root: {
    "&:hover": {
      "&$underline": {
        "&::before": {
          borderColor: theme.palette.primary.dark
        }
      }
    }
  },
  input: {
    fontWeight: 700,
    color: theme.palette.primary.main
  },
  underline: {
    "&::before": {
      borderColor: theme.palette.primary.main
    }
  }
}))(Input);

const ThemedSelect = withStyles((theme) => ({
  select: {
    "&:hover": {
      "& ~ $icon": {
        color: theme.palette.primary.dark
      }
    }
  },
  icon: {}
}))(Select);

<ThemedSelect input={<ThemedInput />}></ThemedSelect>