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

Tips for sorting server components using a URL search parameter [Next.js, Prisma]

My goal is straightforward: I want to be able to filter my Prisma database based on parameters passed in the URL when I click on a CategoryBox. After clicking on a CategoryBox, my URL does change to something like http://localhost:3000/?category=XYZ, but ...

typescriptnext.jsprisma

Tips for verifying login credentials with MongoDB and Express: Leveraging db.collection().findOne() or .find() functions

I am encountering an issue with a POST request involving user credentials being sent from a Login page to the API Server. The code looks like this: loginUser(creds) { //creds is in the form of { username: bob, password: 123 } var request = { ...

javascriptnode.jsmongodbexpressdatabase

Strategies for resolving type issues in NextJs with Typescript

In my project using Next.js with TypeScript, I encountered an issue while trying to utilize the skipLibCheck = false property for enhanced checking. This additional check caused the build process to break, resulting in the following error: Error info - U ...

javascriptreactjstypescriptnext.js

Triggering of NVD3 Angular Directive callback occurring prematurely

Lately, I've delved into utilizing NVD3's impressive angular directives for crafting D3 charts. They certainly have a sleek design. However, I'm encountering numerous challenges with callbacks. While callbacks function smoothly when incorpor ...

javascriptangularjsd3.jscallbacknvd3.js

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

javascripthtmlcsstwitter-bootstrapnavigation

Unable to implement React tooltips in a different Component

After attempting to create a separate component for React Tooltips in order to easily reuse it within my project, I encountered an issue that results in an error upon reloading the App. Error https://i.sstatic.net/RsBhU.png I have already installed react- ...

reactjsnext.jsbootstrap-5react-bootstrap

a personalized material-ui autocomplete feature

I'm puzzled by the fact that autocomplete clears the selected value, while the logic for selecting a value works perfectly fine. Check out this sandbox example to see what I mean: sandbox example ...

reactjsmaterial-uiuse-state

Discrepancy in listener state detected with ReactJS version 16.13.1 Hooks

I'm struggling to figure out why the magic doesn't work here. I've tried everything that comes to mind, but I can't seem to fix the problem. I'm attempting to use an array from the react state of my component in a websocket listen ...

reactjsreact-hooks

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal

Using jQuery to toggle visibility on click within WordPress

Looking for a way to make three buttons change color on hover and display different content when clicked? You're not alone! Despite searching through tutorials and forums, the solution remains elusive. The buttons are structured like this: <div i ...

javascriptjquerycsshtmlwordpress

Exploring the possibilities of reading and writing data in localStorage?

Just starting out with Phonegap, jQuery Mobile, and HTML5 - so please bear with me as I navigate through this learning process! I'm having an issue and could use some help. When trying to use a variable from localStorage, the screen remains blank whe ...

javascriptandroidhtmlcordova

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

Changes in date format using jQuery datepicker

I am having trouble with the code below. Whenever I attempt to change the date, it switches from 15/5/2012 to 05/15/2012. <script> $(document).ready(function(){ $("#date").datepicker({ }); var myDate = new Date(); var month = myDa ...

javascriptajaxjquery-uidatepicker

HTML: Organize a slightly intricate column in a table

I am facing an issue with sorting columns in an HTML table that has 2 headers row: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <table ...

javascripthtmlhtml-table

Add a prefix to a value entered by the user

I need help with adding a prefix to an input field value using Jquery. I want the input field value to be submitted as "Referrer Email: {email address}" where the {email address} part will be dynamic. The snippet below is what I found, but I'm having ...

javascriptjqueryforms

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml

Trouble arises when using Wijmo's valueChanged event and data binding in Angular 2

As I was working on the following code snippet that triggers a function when the user modifies the wj-input-time value: @Component({ selector: 'my-app', template: '<wj-input-time [step]="1" (valueChanged)="test()"></wj-inpu ...

javascripteventsangularevent-handlingwijmo5

Is it possible to pause and resume animation in React Native?

onAnimation(){ var animation = Animated.timing(this.state.spin,{ toValue:1, duration:4000, easing:Easing.linear }); animation.start(); } onPause(){ this.state.spin.stopAnimation(); } Exploring the world of animati ...

reactjsreact-native

Verifying if the completion of the busboy event has already happened or not

In the form I have, there is a file processing task that takes some time to complete. Currently, while node is processing the files, if it encounters the finish event, it immediately triggers it. How can I ensure that the finish event is only fired after a ...

javascriptnode.jsexpress

Applying Material UI class in React: Troubleshooting an error with your hook call

Recently, I have started using React and encountered an issue with a hook call. I understand the root cause of the problem but unsure how to resolve it without starting from scratch. Here is the snippet of the code: import { Fragment, PureComponent } from ...

typescriptreact-hooksmaterial-ui