Menu
I want the TextField to be naked(no underline) when using material-ui TextField. I do know that using InputBase from material-ui can achieve this, but I kinda need to use TextField API to achieve this but i did not find the way to do it in the API guide.
332
To remove underline from input component with React Material UI, we can set the disableUnderline prop to true . to add the disableUnderline to the Input component. As a result, we wouldn't see the underline of the input now.
The underline can be easily remove by using text-decoration property. The text-decoration property of CSS allows to decorate the text according to requirement. By setting the text-decoration to none to remove the underline from anchor tag.
Add the disableUnderline prop to Select . Here's a modified version of your sandbox: https://codesandbox.io/s/disable-underline-xulxq?file=/src/Dropdown.jsx.
You can prevent the label from "shrinking" up with InputLabelProps={{shrink: false}} . This works but produces another bug in which the label never leave and you end up writing the text over the label.
You can also use the InputProps prop on the TextField component to achieve this by setting the disableUnderline property to true.
<TextField fullWidth placeholder="Search..." InputProps={{ disableUnderline: true }} />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
