In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus

I have attempted various methods to adjust the opacity of the placeholder text, but it seems that Mui has set the default opacity to zero and even using !important does not override it. Is there anyone who can provide guidance on how to resolve this issue?

The specific class that I believe should be overriding the opacity is as follows:

label[data-shrink=false]+.MuiInputBase-formControl .mui-szobsr-MuiInputBase-input-MuiFilledInput-input::-webkit-input-placeholder

Here is a screenshot of the Dev tools showing the class that overrides the opacity.

My goal is to ensure that the placeholder text remains visible at all times, similar to the example shown in this image:

Desired output sample

cssreactjstypescriptmaterial-uiplaceholder

Answer №1

In order to better assist you, it would be beneficial to review your code structure for the component. If you wish to customize the default opacity of the placeholder in a TextField, you can try the following approach:

<TextField
  placeholder='Custom Placeholder Text'
  variant='filled'
  inputProps={{
    sx: {
      '::placeholder': {
        color: ({ palette }: Theme) => palette.text.secondary,
        opacity: 1
      }
    }
  }}
/>

The usage of the sx feature in MUIv5 allows for theme-friendly styling of components. You have the flexibility to adjust the opacity as needed within the inputProps prop of the TextField. While you could also apply sx directly to the TextField, it would involve more complex CSS targeting of the .MuiInputBase-input class. Therefore, utilizing inputProps with sx is a simpler and more efficient method!

Answer №2

After some trial and error, I managed to find a solution to this problem by increasing the specificity of the label element with the addition of the .MuiFormLabel-root className within the ThemeProvider:

MuiInputBase: {
  styleOverrides: {
    formControl: {
      'label[data-shrink=false].MuiFormLabel-root ~ & ::-webkit-input-placeholder': {
        opacity: '0.42!important',
      },
    }
}

I came across this approach in a comment on GitHub which you can find here: https://github.com/mui/material-ui/issues/8436

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

How can you retrieve the component's state from a higher level without relying on useContext?

I have a question regarding creating expanding flex cards. I found an example on Codepen that showcases what I'd like to achieve: https://codepen.io/z-/pen/OBPJKK In my code, I have a component called HomeButtons that generates these flex cards. With ...

javascriptcssreactjsuser-interface

A generic type in TypeScript that allows for partial types to be specified

My goal is to create a type that combines explicit properties with a generic type, where the explicit properties have priority in case of matching keys. I've tried implementing this but encountered an error on a specific line - can anyone clarify why ...

typescripttypescript-generics

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

An ongoing issue with redux-form-material-ui is that when using getRenderedComponent(), it consistently results in

I found inspiration in the official example provided by the creators of the redux-form-material-ui repository. Here is a snippet of my code: import React from 'react'; import { Field } from 'redux-form'; import { TextField } from &apos ...

reactjsreduxmaterial-uiredux-form

Attempting to invoke a TypeScript firebase function

I'm currently working on incorporating Firebase functions in my index.ts file: import * as functions from "firebase-functions"; export const helloWorld = functions.https.onRequest((request, response) => { functions.logger.info(" ...

typescriptfirebasegoogle-cloud-functions

The shorthand for React Fragments <></> disrupts the syntax highlighting in VSCode

While this code does not generate any errors or warnings, the syntax highlighting appears to be incorrect. I have experimented with various themes, all of which exhibit the same issue. Any suggestions on how to fix this? https://i.stack.imgur.com/VZbz2.pn ...

reactjsvisual-studio-code

Can you explain the distinction between using .hover and :hover?

Recently, I came across some CSS code that was written by someone else and it contained the following: li.hover, li:hover { } This made me curious - is there a distinction between .hover and :hover in CSS? Could it be possible that certain browsers inte ...

csshover

I encountered an issue after initiating my React app with the command "npx create-react-app my-app" as running npm start resulted in an ELIFECYCLE error. How should I proceed to resolve

I've been working my way through the official React tutorial and decided to use my own text editor instead of the suggested one. I followed all the instructions until it came time to create my app using "npx create-react-app my-app". However, when I t ...

node.jsreactjs

Struggling with inserting data into MongoDB within my MERN application

I am currently developing a MERN app that allows users to create tasks and collaborate with others. To start my backend, I ran the nodemon index.js command in the git bash terminal. However, every time I try to send POST requests for data, I encounter an e ...

reactjsmongodbexpressmongoosebackend

Is there a way to make the vss sdk treeview collapse automatically?

Is there a way to have the nodes of a combo control of type TreeView.ComboTreeBehaviorName collapsed by default? I've searched through the documentation at this link and this link, but couldn't find a solution. I also examined the types in vss. ...

typescriptazure-devopsvssdk

Adjust the arrangement of divs when resizing the window

I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...

htmlcsssassflexbox

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

javascriptcssxmlsvgstylesheet

Troubleshooting typescript error in styled-components related to Material-UI component

When using typescript and trying to style Material UI components with styled-components, encountering a type error with StyledComponent displaying Type '{ children: string; }' is missing the following properties import React, { PureComponent } f ...

reactjstypescriptmaterial-uistyled-components

The error at core.js:4002 is a NullInjectorError with a StaticInjectorError in AppModule when trying to inject FilterService into Table

While exploring PrimeNg Table control in my application - as a beginner in PrimeNg & Angular, I encountered an error No provider for FilterService! shown below: core.js:4002 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppMo ...

angulartypescriptprimeng

Issue: Proper handling of data serialization from getStaticProps in Next.js

I've been working on Next.js and encountered an issue while trying to access data. Error: Error serializing `.profileData` returned from `getStaticProps` in "/profile/[slug]". Reason: `undefined` cannot be serialized as JSON. Please use `nul ...

javascriptreactjsecmascript-6next.jsserver-side-rendering

In the event that a different filter is modified using useEffect, the page should be reset back

I am utilizing react functional components and encountering an issue with calling data from an API with available filters and pagination. Whenever I change a filter type, the pagination needs to reset back to the first page. const pageChange = (page) => ...

reactjsmaterial-ui

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

jqueryhtmlcss

What is the best way to implement an interface for accurately checking each prop type?

Currently, while working with Typescript, I am looking for a solution to define an interface with specific properties inside my object of marks. At the moment, I am using "any", but I know there must be a better approach. Any guidance or advice on how to p ...

typescriptnext.js

Managing state arrays in React JS: A guide to efficiently adding and removing items using a single function

Using React JS Class Component. Within a single function, I am attempting to... Add an integer value to an array if it is not already in the array and also remove a value from the array if it does exist. Note that initially the array will be empty [] My ...

reactjsarrays

Looking for a straightforward method to handle local state using Apollo Client 2.5 in React? Wondering what the counterpart to 'client.writeData' is when it comes to reading data?

Exploring the local state management capabilities of Apollo Client 2.5 has been quite a challenge for me. While I found Apollo Server easy to grasp, this aspect is proving to be more complex. I have a basic understanding of setting up local resolvers and ...

reactjsapolloreact-apolloapollo-client