How can i change CSS of select component that inherited from inputBase, outlined and their pseudo-class

I am trying to customize CSS of a select component of material-ui this is inherited from class="MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85" now i am stuck not able to change default design. Please help me, I don't have much experience with material-ui

I have tried to pass an object in classes props of select to change style applied by MuiInputBase-root-97, MuiInput-root-84, MuiInput-underline-88, MuiInputBase-formControl-98, MuiInput-formControl-85, and their pseudo class

const styles = theme => ({
    root: {
      '&$hover': {
      color: 'red',
    },
    },
    inputUnderline: {
      minWidth: 220,
    },
    selectEmpty: {
      marginTop: theme.spacing.unit * 2,
    },
formControl: {
      margin: theme.spacing.unit,
      minWidth: 120,
    },
  });

<FormControl className={classes.formControl}>
          <Select
            value={this.state.age}
            onChange={this.handelchange}
            name="age"
            displayEmpty
            className={classes.selectEmpty}
            classes={{
            underline: classes.inputUnderline //change css of MuiInput-underline-88 and their pseudo class
            root: classes.inputBaseRoot //want to change css of MuiInputBase-root-97 and their pseudo class
            }}
          >
            <MenuItem value="" disabled>
              Placeholder
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
          <FormHelperText>Placeholder</FormHelperText>
        </FormControl>

I want to remove border at the bottom on hover, focus, after, and before I want a custom design in it overrides all CSS class at a select componentstrong text