Ways to modify the text color of an inactive TextField in Material UI React JS

After researching how to change the disabled TextField font color on Stack Overflow, I implemented the solution using Material-UI. However, when I tried to create a new customized TextField based on the example provided, it did not work as expected and displayed nothing.

import {withStyles} from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";

const myTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
}
}
})(TextField);

<myTextField
value={user != null ? user.nam : null}
disabled={true}
variant="outlined"
margin="normal"
fullWidth
id="nam"
autoFocus
label="nam"
/>

<TextField
value={user != null ? user.famil : null}
disabled={true}
variant="outlined"
margin="normal"
fullWidth
id="famil"
autoFocus
label="famil"
/>

The issue persists where the TextField "famil" is shown but the custom TextField "nam" does not display correctly.

Answer №1

One mistake I made was using a lowercase name for my React Component. Changing "myTextField" to "MyTextField" resolved the issue.

Additionally, make sure to use the .MuiFormLabel-root.Mui-disabled class to modify the font color. The .MuiInputBase-root.Mui-disabled class only affects the label font color of the TextField.

const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
    color: "rgba(0, 0, 0,0.0)"
},

}
})(TextField);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

Error in TypeScript: The type 'Color' cannot be assigned to the type '"default" | "primary" | "secondary"'

Currently, I am utilizing MUI along with typescript and encountering the following issue. It seems like I may be overlooking a fundamental concept here but unfortunately cannot pinpoint it. Error: Type 'Color' is not assignable to type '&quo ...

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): .limit { max-width: 50px; ...

The React app server does not automatically restart when using create-react-app

I'm working on a simple app using create-react-app, but for some reason the server is not updating with my changes. Can someone please assist me? Here are my versions: npm version 6.14.4 node version 10.19.0 Ubuntu 20.04 LTS WSL 2 Windows 10 Home T ...

Bootstrap is unable to function properly without jQuery, throwing an error message that states: "Bootstrap's JavaScript

Attempting to create a Bootstrap interface for a program. Added jQuery 1.11.0 to the <head> tag, however upon launching the web page in a browser, jQuery throws an error: Uncaught Error: Bootstrap's JavaScript requires jQuery Various attempts ...

Modifying the chart width in Chart.js: A step-by-step guide

After creating a chart using Chart Js, I encountered an issue where the chart did not fit within the specified width. Adjusting the attributes of canvas proved to be ineffective, specifically with regards to the width attribute. Despite changing the value, ...

The darkTheme setting in Material-UI does not have any impact on the styles of

I have a simple question about utilizing the Material-ui default darkTheme in a specific section of my app. Below is a sample code snippet: <div> <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> <div> <AppBar title ...

An unexpected error has occurred within React Native, indicating that an object is

It's baffling why I keep receiving the error message: "undefined is not an object (evaluating '_this.props.navigation.navigate')" I am fairly new to react and have tried every possible solution but still cannot resolve this error. Belo ...

Tips for utilizing useQuery when props change using Apollo:

I am currently facing a challenge with my BooksList component where I need to pass props down to the BooksDetails component only when a title is clicked. I am trying to figure out how to utilize an Apollo hook to query only on prop changes. I have been ex ...

Creating a basic toggle switch in React Native to easily switch between dark and light themes

I'm currently working on a switch component that will toggle the theme of my app between light and dark. Unfortunately, my current approach is not achieving the desired result. How can I properly implement the functionality to switch the theme of the ...

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

Is there a way to design a table that is responsive and automatically converts to a list when viewed on a mobile device

I am trying to design a responsive table showcasing artists' names. The goal is to have it look similar to this example: After finding and customizing code for the table, I encountered an issue when the table collapses on mobile view. The invisible e ...

The error event was not handled properly in events.js at line 174 when using expo, resulting in an unhandled error being thrown

My React Native project using Expo on Android was successfully set up. Initially, when I run 'expo start', the application runs without any issues. However, after some time, I encounter the following error: events.js :174 throw er; // U ...

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

In the HTML page, I have two buttons implemented with the following code: <!-- Button for WIFI projects: --> <a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi"> <div class="news_box news_box_01 hvr-u ...

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

How can I ensure a successful redirect to react-router root path after saving to MongoDB in Express?

As a newcomer to React and react-router, I may be making some rookie mistakes in my project. Currently, I am constructing a web application with React and react-router as the frontend server, paired with Express and MongoDB for the backend. To communicate ...

Before the async function, make sure to set the value using React's useState

Exploring the world of react context api for the very first time. Below is my react code utilizing the context api: const [valChanged, setValChanged] = useState(false); async function modalSave() { await setValChanged(true); // STEP 1 await o ...

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

React is failing to display JSX elements within a map function

Currently, I am attempting to run a loop and then display JSX content: While the console.log displays the correct data, the return statement is not rendering the HTML content. const StaticTable = (props) => { const [data, setData] = useState({}); ...

There was an issue with retrieving the image URL from the source, causing an error message to display: "

I encountered an error while trying to access my product. Here is the error message https://i.stack.imgur.com/fTmL0.png It seems that the image URL from the sanity database cannot be rendered, even though it worked fine in the tutorial I was following. I ...