How can I change the font color of a disabled MUI TextField to black for better visibility?
See below for the code snippet:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I have successfully removed the underline from the standard text Field, but now I am looking to make the text color black when it is disabled.
Following Madhuri's clever approach, one can also leverage the sx prop without the need to import styled components:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "black",
},
}}
/>
To override the necessary CSS, make sure to utilize the ".Mui-disabled" class as demonstrated below:
import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}));
function Application() {
return (
<>
<span>Disabled Input:</span>
<CustomDisableInput
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
value="your text"
InputProps={{ disableUnderline: true }}
disabled={true}
/>
</>
);
}
For a live demonstration, please visit - https://codesandbox.io/s/mui-customdisableinput-xl7wv
If you want the text field to inherit its color as if it were not disabled, rather than having to manually set a color:
<TextField
...
disabled={true}
InputProps={{
sx: {
"&.MuiInputBase-root.Mui-disabled": { color: "unset" },
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "unset",
},
},
}}
/>
I attempted to follow a tutorial to set up Angular 2 with TypeScript from the following link: https://angular.io/guide/quickstart However, I encountered the following error: ReferenceError: System is not defined System.config I am uncertain why this e ...
Lately, the community has come up with some amazing tools to push early versions of IE beyond their intended capabilities. For example, using multi-column CSS selectors. However, I've been struggling to find a JavaScript that can be loaded conditional ...
I'm encountering an issue with inserting a variable into my array. Below is the code snippet: var data = new Array(); google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/r ...
I'm in the process of transforming a web-based React + Redux + MUI application into an Electron app. The original app features a main AppBar with multiple dropdown menus, each containing menu items that interact with the app's Redux store. While ...
Is there anyone who has successfully integrated the Earth Engine API into their front-end JavaScript code? I've been attempting to follow the demo on the earth-engine repository to add a layer to a map, but I haven't had any success. It seems lik ...
When working with Catberry, it is essential that all components have unique IDs. How can you ensure that each ID remains distinctive even within a complex structure of nested components? ...
I recently developed a React.js web application and am exploring the use of Amplitude Analytics, which provides a Javascript SDK found here. According to the guidelines, I need to include a <script></script> within the <head></head> ...
I am currently developing a Joomla module that features a progress bar utilizing the ProgressBar.js plugin. Since this module is designed to load multiple objects on a single page, hardcoding the IDs of these objects is not feasible. To address this, I uti ...
Attempting to launch a (Nextjs-generated) page in a new window is causing an error message to appear: Uncaught ReferenceError: global is not defined Here is the full error: react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not de ...
Recently, I made a change in my code where I replaced $stateChangeStart with $transitions.onStart $rootScope.$on('$stateChangeStart', function(e, ...){ e.preventDefault(); // other code goes here... }); Now, the updated code looks lik ...
My approach to Angular Form Builder initialization includes a group that looks like this: contactReason: this.formBuilder.group({ description: '', source: this.sourceType() }) For the 'description' field, I hav ...
Let's dive into this directive: .directive('img', function () { return { restrict: 'E', link: function (scope, elem, attr) { if (attr.src && attr.type === "extension"){ var ...
Can anyone assist me in dynamically adding rows and automatically generating IDs? I am currently using a click event for this task, but when adding a row, I have to input details manually. Is there a way to automate this process? Any help would be greatly ...
I am currently utilizing the Mui Grid component and aiming to display the content of a column based on certain data conditions. Could someone guide me on how to incorporate a conditional statement in the renderCell method? const columns: GridColDef[] = [ ...
The function useHider was created to conceal specific values from an object with the correct type. For example, using const res = useHider({ id: 1, title: "hi"}, "id"), will result in { title: "hi" } being returned. Attempting ...
I am encountering an issue while building a progressive web app using Create React App. Lighthouse benchmarking results in an error, indicating that my PWA is not installable. Surprisingly, I face the same problem even when utilizing the official PWA templ ...
I am attempting to send a request to a PHP file. I collect the longitude and latitude from a function in the Maps API, then use AJAX to store these points in a MySQL database. Using AJAX function savePoint(latitude, longitude){ $.ajax({ ...
I have a bootstrap accordion that I want to customize. Specifically, I only want to enable a panel under specific conditions. The idea is for the second panel to be collapsible only when the first panel is valid. <div class="panel-group" id="accordion" ...
I am encountering an issue with my angular directive that is used to display a button form. The template remains hidden until it needs to be displayed for the user. Although the template works fine on its own, it does not appear when integrated into the la ...
const obj = { "pi_diagram": null, "painting": null, "heat_treatment": null, "welding_procedure": null, "inspection_test": null, "pipecl_hadoop": null, "pipecl": null, "ludo_min_hado ...