What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

I've been working on customizing my theme file with overrides, and I've encountered a strange bug while trying to style the outlined input. It seems like there are two borders appearing when these styles are implemented.

https://i.stack.imgur.com/Gmabx.png

https://i.stack.imgur.com/NGpyB.png

Here's the section of MUI outlined input overrides:

MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: "4px",
          border: "1px solid green ",
          "&:hover": { borderRadius: "4px", border: "1px solid red" },
          "&:disabled": { borderRadius: "4px", border: "1px solid black" },
          "&.Mui-focused": { borderRadius: "4px", border: "2px solid blue" },
        },
      },
    },

If anyone has any tips or suggestions on how to resolve this issue, I would greatly appreciate it!

javascriptcssreactjstypescriptmaterial-ui

Answer №1

Upon examining the Outlined Input, you will notice that it consists of 2 child elements. The first element is the input, while the second one is a fieldset. To apply styles to the fieldset, you will need to do so.

https://i.stack.imgur.com/IsKWJ.png

I am unsure about your specific intentions with the styling as there are 4 different border colors being utilized... I assume you may be looking for something along the lines of

MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& fieldset" {
            borderColor: "red";
          }
        },
      },
    },

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

Using the same button to navigate to a different page in react-router-dom and sending data from a form that contains necessary attributes on form.Control

I am currently working on a project using React Bootstrap forms and React Router DOM. I have encountered an issue where the same button is responsible for both redirecting to another page and submitting data. My goal is to have the form check if all requir ...

reactjsreact-router-domreact-bootstrap

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

htmlangulartypescriptbootstrap-4angular2-routing

Can we incorporate modulo into the loop?

I have a JavaScript function with HTML code inside. I need the ".one-card" div to repeat four times within each ".row" div. The ".row" div is being repeated in a foreach loop. I want to check if the result of modulo (4) is not equal to zero, then display t ...

javascripthtmlmodulo

Customizing the hover behavior of a div element without causing displacement of surrounding elements

I am facing an issue where the descriptions in my list of 100 items are longer than the width of the div, causing the text to be cut off. I want to display the full description on hover without affecting the layout of other items. Currently, when I hover o ...

htmlcssangularsass

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

I am attempting to replace all the text inside a DIV, including within its children, without modifying any HTML tags. Specifically, I want to switch all instances of 'Hello' to 'Hi'. Thank you for your help. var changes = $('div ...

javascriptjqueryhtmlreplace

Troubleshooting: Resolving the Error "Cannot find Property htmlFor on Custom React Component"

I am currently working with a custom component that looks like this: import React from "react"; import classnames from 'classnames'; import { ButtonVariantColor } from '../types/button'; export type IconButtonProps = { e ...

javascriptreactjstypescript

The typed union type FormGroup in Angular stands out for its versatility and robustness

Within my application, users select a value from a dropdown menu to determine which type of FormGroup should be utilized. These formGroups serve as "additional information" based on the selection made. I am currently working with three distinct types of f ...

angulartypescripttypesangular-reactive-formsformgroups

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

javascriptphpcssjsonanimation

Tips for securely implementing JSON web tokens when integrating an external application with the WordPress REST API

I have a query regarding JWT. Let's consider this situation. A -> wordpress site with wp rest api enabled; B -> External application (for example, a simple javascript/jQuery app) Suppose I want to make a post request or create a new post on the wor ...

javascriptjsonajaxwordpressjwt

"Want to learn how to dynamically disable an input field in AngularJS when another field is selected? Find out how to achieve this using the

Hey there, I'm dealing with two input fields. Input field A is a drop-down menu and input field B. They both have the same value (same ng-model). My goal is to clear the second input field whenever the user selects an option from the dropdown. Can any ...

javascriptjquerypythonangularjsdjango

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

TL;DR Summary (Using Lodash as an example, my application needs to import JavaScript from an NPM package that relies on Lodash. To prevent bundling duplicate versions of the same function, I'm considering not installing Lodash in my application' ...

javascriptnode.jsnpm

"Error: Unfinished string literal encountered" occurring in a TypeScript app.component.ts file in NativeScript

I've been trying to learn NativeScript through a tutorial, but I keep encountering errors. Here is an excerpt from my app.component.ts file: import { Component } from '@angular/core'; @Component ({ selector: 'my-app', temp ...

typescriptnativescript

Exploring the functionalities of arrays in Typescript: A beginner's guide

Currently, I am working on a react project and building a store within it. Below is the code snippet I have implemented: import React, { useReducer, useEffect } from 'react'; import { v4 as uuid } from 'uuid'; import { Movie, MoviesAct ...

reactjstypescriptreduxuse-reducer

Sorting WordPress entries by nearby locations

I have WordPress posts that are being displayed on a Google Map. The posts are pulling data from a custom post field that contains the latlng value, where latitude and longitude are combined into one. Additionally, the map shows the user's location u ...

javascriptphpwordpressgoogle-mapscustom-post-type

Leveraging Handlebars for templating in Node.js to incorporate a customized layout

app.js const exphbs = require('express-handlebars'); app.engine('handlebars', exphbs({defaultLayout: 'layout'})); app.set('view engine', 'handlebars'); app.use('/catalog', require('./routes/ ...

javascriptnode.jsexpresshandlebars.js

What is the process for extracting HTML content using the JavaScript executor?

import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; public class WebDriverExample { public static void main(String[] args) { System.setProperty("webdriver.c ...

javascriptjavaseleniumselenium-webdriver

Use Yii2 to pass an ID when a button is clicked in order to render a partial using

On the index page, I display all the rows and some fields from my model. When a button is clicked, I want a modal to appear with all the data from the corresponding row. When the button is clicked, I need an ajax call to render a partial view. This will i ...

javascriptjqueryajaxyii2

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...

cssreactjssvgiconsmaterial-ui

After a postback in JavaScript, the Root Path variable becomes null

I have been attempting to save the Root URL in a JavaScript variable within my _Layout.cshtml like this: <script type="text/javascript> var rootpath = ""; $(document).ready(function () { rootpath = "@VirtualPathUtility.ToAbsolute("~/ ...

javascriptasp.net-mvcasp.net-mvc-4

Error in AngularJS v1.2.5 when using textarea with placeholder attribute in IE11

Having trouble with an Angular JS v1.2.5 form that is not functioning in IE11, despite working perfectly in Firefox, Chrome, and Safari. The issue seems to be related to using interpolation inside the placeholder attribute of a textarea. <body ng-con ...

javascriptjqueryinternet-explorerangularjs