Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled.

Here is what I have attempted so far:

const theme = {
  mode: 'light',
  primary: {
    main: primaryBlue,
  },
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        // Trying to combine 'disabled' & 'notchedOutline'
        notchedOutline: {
          borderColor: 'red' // currently set to red
        },
        disabled: {
          borderColor: 'green', // should be green but it's not working
        }
      }
    }
  }
}

Any suggestions on how to achieve this?

javascriptcssreactjsmaterial-ui

Answer №1

Through a series of trials and errors, I finally succeeded in customizing the border color of the disabled input!

const theme = {
  ...
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        // THE SOLUTION
        root: {
          "&.Mui-disabled": {
            "& .MuiOutlinedInput-notchedOutline": {
              borderColor: 'grey' // adjust border color
            },
            "& .MuiInputAdornment-root p": {
              color: 'grey', // modify adornment style
            },
          }
        },
      }
    }
  }
}

What threw me off was that the input itself didn't have the border. It turned out to be a sibling element 

<fieldset class='MuiOutlinedInput-notchedOutline'>

Answer №2

Give this a shot:

'&$notEnabled': {
       borderColor: 'green',
      },

Answer №3

It appears that there may be an issue with the disabled state, or the border is missing when disabled.

Here is a suggestion to address this:

MuiOutlinedInput: {
    styleOverrides: {
        root: {
            '.Mui-disabled': {
                border: '1px solid 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

The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS. <div id="containe ...

csshtml

What is the best way to adjust the padding in a Material-UI autocomplete component?

I'm looking to adjust the height of the material-ui autocomplete control, and I came across a useful example for modifying the outline color using createMuiTheme on the Autocomplete's TextField. You can see the code in this codesandbox: Code Exam ...

reactjsmaterial-ui

Discover the depth of a deeply nested array

I have a complex array structure that looks something like this: I am trying to determine the depth of this nested array, focusing on the element with the most deeply embedded children. let arr = [ { name: 'tiger', children: [{ ...

javascriptarraysrecursionnested

Troubleshooting issues with data parsing in an Angular typeahead module

Utilizing the AngularJS Bootstrap typeahead module, I am attempting to showcase data from an array of objects. Despite receiving data from my API call, I keep encountering the following error: TypeError: Cannot read property 'length' of undefine ...

javascriptangularjstwitter-bootstrap

Adjusting offcanvas height in Bootstrap based on content

.cursor-pointer { cursor: pointer; } <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1d09c13c809e9afbcfc1792efeff8">[email protected]</a>/dist/js/bootstr ...

htmlcsstwitter-bootstrapbootstrap-5

Update the state of the parent component based on changes made in the child component (both are functional

Here is the layout for the current issue: . ├── components │ ├── ModalPolicy.js │ ├── Footer │ ├── index.js ├── pages │ ├── index.js I attempted to display the Modal on Footer/index.js but it did no ...

javascriptreactjsnext.jsreact-functional-component

In JavaScript, an HTTP request file includes a JavaScript variable

I am currently working on a Node.js project that involves making an HTTP request to fetch a JavaScript file. For example, let's say we have a file named a.js: var a = 'i am a.js'; var b = 'please convert me to js'; Here is the a ...

javascriptnode.jsexpressaxios

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

Experiencing some difficulties while utilizing the window.ethereum in the latest version of NextJs. Everything was functioning smoothly with NextJs 12, but after upgrading to NextJs 13, this error started popping up. Are there any alternative solutions ava ...

javascripttypescriptnext.jsethereumethers.js

The issue of linking .then() functions

I've been struggling to grasp the concept of Promises/then-ables for a while now. Currently, I am working with NextJS. My goal is to chain together the following steps: Retrieve data from an API Save the data Modify the data to create a component (w ...

javascriptnext.jspromise

Vue.js encountered an error while trying to load the component: either the template or render function is not

Currently I am delving into the realm of Vue.js paired with Laravel by following this series, where the narrator seems to breeze through without encountering any errors. Unfortunately, when I attempted to change the route, a pesky error made an appearance. ...

javascriptlaravelvue.js

The Typescript const assertion translated into Javascript

Is there a way in JavaScript to achieve constant-like behavior similar to TypeScript's const assertion? const arr = [1,2,3,4] as const I am looking for a solution in JavaScript that allows me to create an array that cannot be further mutated. ...

javascriptarraystypescript

extracting a JSON array from an API

I'm trying to extract the title from my API using JavaScript and then display it in HTML. api:(https://k0wa1un85b.execute-api.us-east-1.amazonaws.com/production/books) The JSON response is as follows: {"statusCode":200,"body":[{"id":"4f160b1f8693cd ...

javascriptjson

What happens to the content within a <textarea> element if it is not enclosed between the opening and closing tags?

Here's a puzzling situation - I've entered the word Hello. into a <textarea>, and while I can see it on my screen, it doesn't show up between the opening and closing <textarea> tags. It may seem like a simple issue, but I'v ...

javascripthtmltextarea

What is the best method to retrieve the window object in XUL?

I'm attempting to assign an onLoad event to the current webpage through a Firefox extension. My approach involves utilizing the gBrowser object, although I am uncertain if this is the most optimal method. The goal is to establish an onLoad event for t ...

javascriptfirefoxfirefox-addonxul

Discovering the children of the target DOM element in React

Imagine you have an HTML unordered list that you want to turn into a React element: <ul id="mylist"> <li><a href="">Something</a></li> <li><a href="">Another thing</a></li> <li><a ...

javascriptreactjs

How can dependencies be conditionally imported in a module that is shared between React (Next.js) and React Native?

I am looking to create a shared Typescript module that can be used in both a React (Next.js) web app and React Native mobile apps. This module will be responsible for managing communication with the backend (Firebase) and handling state management using t ...

javascriptreactjsfirebasereact-nativenext.js

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

My question might not be articulated correctly. I'm facing an issue with dynamically translating my webpage using Microsoft's Cognitive Services Translator. I created a react hook for the translator, which works well when I need to translate a si ...

reactjstypescriptreact-hooksazure-cognitive-services

Is it feasible to organize checkboxes into columns using CSS?

Can checkboxes be reflowed into columns horizontally as the container's height changes dynamically with an unknown number of checkboxes? Here is a visual representation to illustrate the concept: Height = 180px (20px * 9 checkboxes): [ ] Checkbox 1 ...

htmlcss

Use a jQuery or XPath selector to choose certain HTML tags from a list of HTML tags

Consider this html structure : ... <div class="a">April 2018</div> <div class="b">Monday 02</div> <div class="c">...</div> <!-- Capture this tag and its children --> <div class="c">...</div> <!-- ...

javascriptjqueryhtmlxpath

Tips for activating a deactivated input field in ReactJS

I am trying to create a feature where my textfields are automatically disabled, but can be enabled for editing by clicking an 'Edit' button. Clicking the button again should disable the textfields and save any edits made. I have experimented with ...

javascriptreactjs