Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation.
Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation.
If you want to accomplish this, you have the option of using the InputProps attribute with the TextField component. Simply set the disableUnderline property to true.
<TextField
fullWidth
placeholder="Search..."
InputProps={{ disableUnderline: true }}
/>Although this answer has been marked as accepted, I recommend checking out the alternate solution (which involves using the disableUnderline prop). I realized that there is a specific property for removing the underline after writing another answer on customizing underlines similar to this one.
Here's an example of how to eliminate the underline. The use of :before is for default and hover styles, while :after is for focused styling, necessitating the removal of the border in both cases.
The repetition of ampersands (e.g., "&&&:before") increases the CSS specificity of the rule, ensuring it overrides the default styling (e.g.,
).&:hover:not($disabled):before
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
});
function App() {
const classes = useStyles();
return <TextField defaultValue="default text" InputProps={{ classes }} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/textfield-underline-exocc?fontsize=14
Related answer: How do I custom style the underline of Material-UI without using theme?
I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...
After creating styled components in a separate file with the same name and .css.jsx, such as Abc.jsx having Abc.css.jsx and importing it to utilize in Abc.jsx, an error is encountered when attempting to test Abc.jsx using Enzyme mount. Warning: React.creat ...
I encountered an issue with my appBar where the homepage was appearing behind it instead of below it. Here is a snapshot of the problem: https://i.stack.imgur.com/27LjB.png Below are the codes for the AppBar: const Header = () => { const [value, setV ...
Still learning the ropes of JavaScript and React. Currently facing a bit of a roadblock with the basic react/JavaScript syntax. Here's what I'm trying to accomplish: import axios from 'axios'; import React, { useState, useEffect, useMe ...
I've been working on a project at , where you can click on a small map to expand a larger map below it. However, I noticed that when you scroll down to the large map and then try to close it using the button at the bottom, the content on the page jum ...
Having an issue with the select function in a material-table (module that was installed). Also incorporating the Chips component from Material-UI. Oddly enough, the renderValue function doesn't seem to be getting called when selecting something and I& ...
I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows: var zoomable = document.getElementById('zoomable'), zX = 1; window.addEvent ...
I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...
In my single page application, I have a fixed container and I am trying to make one div inside this container overlap the boundaries of the fixed container while also vertically scrolling with its contents. Unfortunately, I have only been able to achieve e ...
I am currently exploring ways to make one text area disappear while another one appears in its place. With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the rig ...
When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...
Some users are experiencing issues with the vertical-align: middle property not working on a span. .tc__timezone-toggle { display: flex; } .tc__timezone-toggle span { vertical-align: middle; } .tc__timezone-toggle-ui { display: block; font-wei ...
My Next.js App Router has a nested dynamic page structure using catchall routes configured like this: app/stay/ |__[...category] | |__page.js |__[uid] | |__page.js |__layout.js Within the 'layout.js' file, there is a con ...
I'm in the midst of working on a Next.js project and experimenting with SCSS/SASS for my styling needs. I'm currently grappling with how to streamline the process of applying class names. Here's the issue at hand: Within one of my componen ...
I am encountering an issue while trying to send data from React to Express. I have an array of images that need to be sent, but due to the inability to send a single image as a test, I will need to clarify the scenario. To simplify the testing process, I h ...
I am encountering an issue with the alignment of TextField labels and placeholder text in Material UI. Despite directly copying and pasting code from Material-UI demos, I cannot seem to get the labels and placeholders to center within the input fields or o ...
I am currently working with material-ui and have a grid with a button placed below it on a paper. However, I am facing difficulty in pushing the button to the very bottom of the paper. Could someone provide guidance on how to accomplish this? Thank you! ...
Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...
I recently added a new plugin called tailwind-scrollbar-hide to my project. import type { Config } from "tailwindcss"; export default { content: ["./app/**/*.{ts,tsx,jsx,js}"], theme: { extend: { fontFamily: { sta ...
Curiosity strikes me - what actually happens when I modify more than one state in a handler function? Will they be updated simultaneously, or will the changes occur sequentially? const [x, setX] = useState(0) const [y, setY] = useState(0) const handlerFu ...