reactjs - why two border showing on hover of input field?

Question

could you please tell me why two border showing on hover of input field ? see my image

I am using react+ material with react . here is my code https://codesandbox.io/s/kxx08jo487

I want only one border red .I tried like that

root: {
    '&>div': {
      '&:hover': {
        borderBottom: '1px solid red',
      }
    },
  },

I take help from this link https://material-ui.com/customization/overrides/

Answer 1

Hi joy since Material UI has been evolving rapidly. There are drastic changes in API being reflected in docs. We use formLabel inside formControl to take leverage of JSS.

Here is the working code: Border Color Customised