why two border showing on hover of input field?

2
votes

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

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/

1
reactjsreact-reduxmaterial-designmaterial-uijss

1 Answers

1
votes

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