Tips for changing the color of MUI TextField in React.JS?

Is there a way to customize the color of the TextField frame? It always shows up as black, making it hard to use in dark mode. I am looking to change the color of both the label and the input line.

return (
    <div
        align="center"
        id="rl-signup"
        className="background h-screen w-screen grid-flow-row auto-rows-auto"
    >
        <TextField
            className="m-auto mb-4 custom-color"
            id="signup-email"
            label="Email"
            placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e7e5e3e5f0e5fdc4f6e1e8edeaefaae7ebe9">[email protected]</a>"
            helperText="Your organization is ReLink"
            onChange={(e) => setEmail(e.target.value)}
            variant="standard"
            required
        />
    </div>
);

I'm wondering what steps need to be taken to personalize the TextField colors, similar to this image:

https://i.sstatic.net/zGGps.png

cssreactjsmaterial-ui

Answer №1

If you want to change the color of a TextField in Material-UI while working with React.js, one way to do it is by using the input property to apply inline styles directly to the input element.

Check out this simple example:

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

function MyComponent() {
  return (
    <TextField
      inputProps={{
        style: {
          color: "blue"
        }
      }}
    />
  );
}

With this code, the text inside the TextField will be displayed in blue.

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

Comparing React versions: 0.14.7 and 15.4.0

Can someone help me understand the difference between React versions 0.14.7 and 15.4.0? I've inherited a React app from a previous developer, and I noticed that it's set to use React ^0.14.7 in the package.json file. However, when I open Visual ...

reactjs

Error encountered when uploading files using Multer (Node.js and React)

I've just submitted a request from the client, and it seems to be causing some issues. Here's the code snippet that is giving me trouble: if(file){ const data = new FormData() const fileName = Date.now() + file.name data.append( ...

javascriptnode.jsreactjsfile-uploadmulter

Tips for preventing the error message "Invalid hook call: Hooks can only be used inside a functional component's body"

In a separate file dedicated to handling Axios calls, I have implemented the following code: import { useSelector, useDispatch } from "react-redux"; import __ from 'lodash' import axios from "axios"; import { getPersis ...

reactjsreact-hooks

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

How can I enforce a specific naming structure for folders and subfolders? I not only want to control the styling of the names (kebab, camel), but also the actual names of the folders and files themselves. For example, consider the following paths: ./src/ ...

javascriptreactjstypescripteslintlint

What would be the best location for me to place my code for adding fresh data to Firestore?

Currently, I am working on a project that involves using React and Firebase. The issue I have encountered is that the logic for writing new data to Firestore is directly in my components, which is making them quite cumbersome. I am also in the process of i ...

reactjsfirebasereact-redux-firebase

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

Creating unique keys with Material UI's `makeStyles` feature

I'm encountering an issue with a specific style that I have implemented. Here is the code snippet: background: "-moz-linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%, rgba(0,0,0,0) 100%)", background: &quo ...

reactjsmaterial-ui

Optimal method for displaying the children component twice in Next.js

In order to create an infinite slider, I had to duplicate the data within my component. The data consists of an array containing a maximum of 20 items, each with an image. The slider is functioning perfectly. Although it may seem unconventional, it was n ...

javascriptreactjsnext.jsreact-hooks

Guide on transferring an HTML template to a React component using props

I've created a React popup window component that accepts templates via props. Check out this example of how the popup is used: popup = ( <div> <Popup text='This is a popup' popupEl={ popupEl } /> < ...

htmlreactjs

Getting an error message "idpiframe_initialization_failed" while trying to login with Google in a React.js application

I recently integrated Login with Google into my react.js app. I followed the steps outlined in a tutorial video which can be found here: https://youtu.be/75aTZq-qoZk. Even though I registered my app with my client Id on Google Cloud Platform under the "Au ...

reactjsgoogle-cloud-platformgoogle-signinreact-google-login

Caution: Utilizing the UNSAFE_componentWillReceiveProps function in a strict mode environment

I successfully integrated a Google map into my project and everything is functioning properly. However, I noticed the following warning in my console and I'm not sure why it's appearing or how to resolve it. "Warning: Using UNSAFE_component ...

reactjs

Navigate using history.push with user Logout Icon

Currently, I am utilizing a Material UI icon as a logout button in my project. Here is how I have implemented it: function logout(props:any){ localStorage.removeItem("token"); return( <Redirect to="/login" /> ) //props.history.push("/log ...

javascriptreactjstypescriptreact-routerlogout

What are the differences between babel-eslint, eslint-plugin-babel, and eslint-plugin-react?

Can you explain the distinctions between these libraries? babel-eslint [github.com/babel/babel-eslint] eslint-plugin-babel [github.com/babel/eslint-plugin-babel] eslint-plugin-react [github.com/yannickcr/eslint-plugin-react] ...

reactjsbabeljseslint

Tips for rendering an array of objects in tabular form using React JS

there are two sets of arrays with objects: fetch1= [{ "A": 10 "X": mac }, { "A": 20 "X": Hp }] fetch2=[{ "B": 30 "Y": windows }, { "B":40 "Y": macfee }] The desired output should be in the form of a table: A B 10 30 ...

reactjsreact-nativereactstrapreact-modal

Accessing data from a live database in a randomized sequence

When retrieving items from a database, there is often a common code pattern that looks like this: const [dataRcdArray, setDataRcdArray] = useState<never[]>([]); ..... snapshot.forEach((child:IteratedDataSnapshot) => { setDataRcdArray(arr ...

javascriptreactjsnext.jsfirebase-realtime-database

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

csshtmlthymeleaf

Master the integration of Flask API with React-Redux by effectively implementing axios

Hello everyone! I am new to the world of React-Redux and I am currently working on a classification app using Flask API with ReactJS as the front-end. However, I am facing some issues when trying to call the API in Redux through the action file. The predi ...

reactjsreduxpromisereact-reduxaxios

The handleChange function fails to trigger when selecting a date using Material UI components

I am currently facing an issue with the material ui datepicker. When I click on a date, the selected date is not chosen and the date window does not close. I suspect this is due to passing the date into another file and the handleChange function (from Form ...

javascriptreactjsformsmaterial-uiformik-material-ui

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

c#cssasp.netasp.net-mvc

The min-width of 100vh is functioning properly on mobile devices, however, it is not working as expected on PCs when set to 100

When using 100vh, it only works on mobile or if you narrow the width of your web browser on a PC. If the window/width is set at 100%, the image may appear too tall and cause the div class "mars" to overflow the viewport. Unfortunately, screenshots cannot ...

htmlcss