Home

Trying to make OutlinedInput have a transparent border, but getting weird artifacts

enter image description here

Trying to create an outlined variant TextField select with a transparent border. The current theme override I have for it is as follows:

overrides: {     MuiOutlinedInput: {       root: {         backgroundColor: '#F4F4F4',         borderRadius: 8,         height: 56       },       notchedOutline: {         borderColor: 'transparent !important',         borderRadius: 8,         borderWidth: '0px !important'       }     }   }

However, as seen in the picture, you can see in the picture, there’s a weird block artifact around the borders whenever the select is focused.

enter image description here

I only want it to look like it does in this photo, but as soon as it is focused, it receives those odd edges from the top photo. Any help?

Asked on July 16, 2020 in CSS.
Add Comment
Cancel
1 Answer(s)

I’ve been playing with overrides recently too. Material components are usually built with other material components, so you may have to provide overrides to other styles/objects besides MUIOutlinedInput.

You may need to customize MuiInput and/or MuiInputBase.

OR, if you don’t want to override all of those, you can create a custom style object and inject it into that component using withStyles or useStyles

Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.