Как изменить цвет у элемента компонента material ui в react?

Question

[budda674]

Пытаюсь изменить цвет svg стрелки и подчеркивания текста при hover, никак не могу понять как изменить дефолтный стиль.
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>