What is the best way to modify the text color in an MUI Text Field?

I'm completely new to using MUI and React, and I've run into an issue with changing the text color in my input field. Even though I specified 

inputProps={{sx: { color: "CCCCCC" }}}
, the text color remains black while the label and search icon colors change as expected. How can I resolve this problem? Here is the code for my React component:

return (
    <div className="navbar">
        <form onSubmit={requestData}>
            <TextField
                fullWidth
                id="fullWidth"
                label="Enter a fragrance name!"
                InputLabelProps={{ sx: { color: "#CCCCCC" }}}
                inputProps={{sx: { color: "CCCCCC" }}}
                InputProps={{
                    endAdornment: (
                        <InputAdornment position="end">
                            <IconButton onClick={requestData}>
                                <SearchIcon sx={{color: "#CCCCCC"}}/>
                            </IconButton>
                        </InputAdornment>)
                }}
                onChange={(e) => setSearch(e.target.value)}
            />
        </form>
    </div>
)
cssreactjsmaterial-ui

Answer №1

When working with Material-UI components, make sure to utilize the custom styling solution provided by the sx prop for consistent and efficient styling. To modify the text color of an input field, apply the sx prop directly on the TextField component.

return (
    <div className="navbar">
        <form onSubmit={requestData}>
            <TextField
                fullWidth
                id="fullWidth"
                label="Enter a fragrance name!"
                InputLabelProps={{ sx: { color: "#CCCCCC" }}}
                InputProps={{
                    endAdornment: (
                        <InputAdornment position="end">
                            <IconButton onClick={requestData}>
                                <SearchIcon sx={{ color: "#CCCCCC" }}/>
                            </IconButton>
                        </InputAdornment>
                    ),
                    sx: { color: "#CCCCCC" } // Adjust text color here
                }}
                onChange={(e) => setSearch(e.target.value)}
            />
        </form>
    </div>
);

To ensure correct styling, I have repositioned the sx prop from inputProps to InputProps, enabling seamless customization of the input field text color.

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

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4

Display animated GIFs in the popular 9Gag format

Is there a way to display a GIF file after clicking on a JPG file, similar to the functionality on 9Gag.com? I am currently using timthumb.php for displaying JPG images. https://code.google.com/p/timthumb/ Below is the code snippet: <div class="imag ...

javascriptphpjquerycss

Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS. body{ font-family: Arial, Helvetica, sans-serif; } ...

htmlcss

Steps for implementing an <h1> element with the React Material UI theme

I have chosen the 'dark' theme and would like to apply it to an h1 element. How can I achieve this? The method below does not yield the desired result: <MuiThemeProvider theme={theme}> <h1>Page Title</h1> ... The following ...

htmlcssreactjsmaterial-ui

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

Following the successful installation of create-react-app, Npm start is refusing to function properly. The error message Enoent with the error number -4058 is

I'm having trouble running my create-react-app on VS code - the npm start command is giving me an error message. Can someone please assist? $ npm start npm ERR! path C:\Users\Jay\Desktop\NucampFolder\3-React\package.json ...

node.jsreactjsnpmpackagecreate-react-app

What is preventing the determination of the size of my array?

When I call my array "members", it shows as undefined length, which is confusing because Redux DevTools show there is an object in the array. Shouldn't it return the length properly in this case? This issue only arises when I try to submit the form to ...

reactjsreduxmaterial-uiredux-form

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

cssangulartypescriptangular7ionic4

Utilize Flexbox to arrange elements in a column direction without relying on the position property in CSS

Flexbox - align element to the right using flex-direction: column; without relying on position in CSS Hello everyone, I am looking to move my row element to the right without using positioning. This code includes flex-direction: column; and I do not have ...

htmlcssflexbox

Is there a way to determine the percentage between two specified dates?

If I have a specified start and end date, I am interested in knowing the progress percentage achieved from the start date up to the current date compared to the end date. To put it simply: I would like to determine how far along I am towards the end date i ...

javascriptreactjs

Tips for properly utilizing "require" in application.css with the Skeleton framework

I am currently working on implementing the skeleton-rails CSS framework into my application. Within the app/views/layouts/application.html.erb file, I have created containers and a list nav that require styling. Following the guidelines provided by the ske ...

cssruby-on-railsframeworksskeleton-css-boilerplate

What could be causing React to retain the value in the form input within my modal?

Currently in my project, I am utilizing Next.js along with Tailwind CSS and Daisy UI. The functionality on the page includes fetching a JSON object from an API endpoint and displaying two tables: one for source systems and another for attached domains. Cl ...

reactjsreact-hooksnext.jsuse-refdaisyui

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

I've been struggling to incorporate a unique font into my website, but I keep encountering the same error every time. Despite my efforts, I haven't found much guidance on how to rectify this issue. Below is the code I'm using: @font-face ...

htmlcss

Developing in TypeScript with styled-components allows for seamless integration between

New to TypeScript and seeking guidance. I currently have a component utilizing styled-components that I want to transition to TypeScript. import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-comp ...

reactjstypescriptstyled-components

Designing in Ionic 3.x: Implementing Ion-Icon with a gradient backdrop (ion-chip)

Is there a way to add a gradient background to an icon? I attempted to nest the ion-icon within an ion-chip, like so: <ion-chip class="my-chip"> <ion-icon name="basket></ion-icon> </ion-chip Then, in the .css file: ...

htmlcsssassionic2ionic3

Improved method for linking two enums with similar appearances

Currently, I use two enums as shown: enum Tab { Approved = "Approved", Pending = "Pending", Sold = "Sold", } enum ProductStatus { Approved = "Approved", Pending = "Pending", Sold = "Sold&q ...

reactjstypescript

"Error message pops up indicating the dispatcher is missing while using npm link with a local project

Currently, I am working on a React component library that I want to integrate into a local project for testing purposes. My initial approach was to use npm link to connect the component library with my local project. However, during this process, I encount ...

javascriptreactjsnode.jsnpmrollup

Error message encountered on localhost: preflight response contains Access-Control-Allow-Headers issue

I'm currently working on my React app locally at localhost:3000 and utilizing this code snippet: try { const response = await fetch('https://myendpoint.com/abcd/search?c=abc123', { headers: { 'Content-Type': 'application ...

javascriptnode.jsreactjsexpressfetch

The difference between invoking a method directly and utilizing a function to invoke a method

Imagine we have a method inside a class that looks like this class Blog extends Component { postClicked = (id) => { this.setState({selectedPostId: id}) } render () { const newPosts = this.state.posts.map(el => { return & ...

javascriptreactjs

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

csshtmlinternet-explorerinternet-explorer-8