Changing the color of a pseudo element in Material-UI

I'm having trouble changing the border color of the ::after pseudo element on a standard text field from MUI. I've been unable to figure it out.

<TextField id="standard-basic" label="Email" variant="standard"/>

This is the text field whose border color I want to change. The default color is blue. I have attempted the following:

    const inputProps = {
        style: {
          '&.MuiInput-input::after': {
            borderBottom:"2px solid red"
          },
        },
      };

<TextField id="standard-basic" label="Email" variant="standard" InputProps={inputProps} />

Unfortunately, it did not work!

Answer №1

Consider defining the variable and specifying the color type within the CSS script. This approach may result in a unique outcome. Pay close attention to the placement of semicolons and commas as well. I trust that these suggestions will be beneficial.

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 do I adjust the ul size to be proportionate to the header?

I have a list with corresponding hyperlinks in my code, and I am trying to make these elements the same size as the header. I attempted adding auto padding and height auto but it did not produce the desired result. Here is the HTML snippet: <header id ...

Instead of using setTimeout in useEffect to wait for props, opt for an alternative

Looking for a more efficient alternative to using setTimeout in conjunction with props and the useEffect() hook. Currently, the code is functional: const sessionCookie = getCookie('_session'); const { verifiedEmail } = props.credentials; const [l ...

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

My special css style for the div: .message-body { background: #5181a2; padding: 8px 5px; text-align: justify; } I aim to display this particular text inside the div similar to how 'hello hello' appears on the line above. ...

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

React's hover effect is running sluggishly due to delays in state updates for hover effects

When I attempt to change the background color of a list item upon user hover, I notice that as the list size increases, the hover effect slows down significantly, giving the impression of lag on the site. I am utilizing the Tree View component from materi ...

Utilizing Compass SCSS with Blueprint for Optimal Overflow Settings

I've been working with blueprint through Compass, but I'm facing an issue where longer pages don't have scroll bars. It seems like the default setting for overflow is 'hidden'. Since this appears to be the standard, I assume there ...

Leveraging React useEffect for retrieving data and managing component behavior

Having trouble querying data, setting it to state with useEffect, and rendering the results? I've tried a few things but only see changes when state is updated. Any advice would be greatly appreciated. Thank you in advance. useEffect // fetchCamp ...

Tailwind - Error: the function is undefined

Just beginning my journey with React Native and facing this error. Screenshot of IOS App emulator Screenshot of Terminal import React from "react"; import { StyleSheet, Text, View } from 'react-native'; import tw from "tailwind-rn& ...

Text Fade-in Animation with CSS 3

Could someone assist me in creating an animation similar to a marquee using CSS "animation" and "keyframes"? I attempted to move text from top to bottom, but encountered an issue where the text would only restart its movement from the top once it reached ...

What are the potential ways in which an html IMG tag can disrupt the functionality of this

For years, I have been using this form code without any issues. The code functions perfectly and all the tags are correct. However, whenever I include an image tag, it displays a failure message and prevents the mail function in PHP from working. The hea ...

Tips for adjusting the indentation of list items with CSS while working with floating blocks

Recently, I encountered a peculiar situation while working with floating images in a document. It seems that the list items indentation is being determined by the 'red line' rather than the expected 'green' one. I'm puzzled as to ...

Ways to Identify When the Back Button is Clicked

Currently, I am developing an HTML website that contains 4 divs on the index.html page. Initially, when clicking on a div, it would expand while the other sections reduced in width. However, the client requested that the URL should change when clicking o ...

What is the process for creating a new web page? [Exploring web design]

When creating a new page, how exactly does it work? For instance, on a website that allows users to create posts, you may see a link like this: example.com/post/randomised123 I'm curious - does this process also involve server directories like pop ...

Ensuring Smooth Alignment of CSS Divs

I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...

Avoiding double tapping to zoom on Chrome Android while using the desktop version of a website

Is there a way to disable zooming when double clicking in Google Chrome with the desktop site enabled? I attempted to use <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> without success. I al ...

apply full width styling to bootstrap select dropdown

<div align="center" class="form-group"> <select v-model="subject" class="form-control"> <option v-for="n in papertypes" class="">{{ n.type }}</option> </select> <br> By default, Bootstrap makes the s ...

Issue: Unable to extract the 'title' property from '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is not defined (Next.js Chat App)

Currently facing an issue with the error message "Cannot destructure property 'title' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined" while developing a chat application using Next.js and Solidity. Desp ...

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

What are some creative ways to showcase the vibrant colors of Material 3?

Creating a cohesive theme using colorSchemeSeed can be challenging because the names of colors for widgets and properties are confusing. It's hard to figure out which color corresponds to which element. Currently, there is no website or service avail ...

Implementing Placeholder Text Across Multiple Lines with Material UI

Currently, for the React App I am developing, I am utilizing Material UI. In order to achieve a multi-line placeholder for a textarea using the TextField component, here is what I have so far: <TextField id="details" ful ...