I'm trying to remove the border around a outlined textfield
<TextField
variant="outlined"
label=""
multiline rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
but no solutions that i have found worked. I've tried to tinker with all i can find but none remove the border.
If you would like a TextField without the outline border, the best thing to do would be to use the Standard variant of the TextField Component.
By default the Standard variant will have an underline beneath the text, but this can be removed by adding InputProps prop and passing in disableUnderline: true:
<TextField
InputProps={{disableUnderline: true}}
variant="standard"
label=""
multiline
rows={55}
placeholder="# Hello World"
style={{ width: '90%' }}
/>
The result will look exactly the same as if you had an outlined TextField without the outline.
Note that it's not recommended you do this, though, for usability reasons; it'll make the text field less distinguishable and less of a clear touch target for users on mobile. Make sure you have some other kind of indication that it's a text field. https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03