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

What is the best way to efficiently update the state of a nested object in React using UseReducer without losing any of the state values?

I am facing an issue in React with a "+" button that is supposed to increment the value of an object property called "Strength" by one. Instead of increasing the value, when I click the button, all state values disappear on my browser view of the app. I&ap ...

reactjsreact-hooks

Can you retrieve a reference/pointer to a specific property of an object in JavaScript?

I am looking to generate an HTML <input> element, and then access its value property so I can update the value through that reference: var input = document.createElement('input'); var valueRef = &(input.value); *valueRef = "Hello world!" ...

javascriptreference

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used backgr ...

jqueryhtmlcss

Difficulty in jQuery's clone() function: cloning an input element without its value

I have successfully implemented jquery's .clone() method, but I'm facing an issue where the value of the previous input field is also getting cloned along with it. How can I prevent this from happening? Below is my code snippet: function addrow ...

javascriptjquery

Vanished were the empty voids within our

It seems that the spaces between words have mysteriously vanished in a font I am currently using. Take a look at this website: I am utilizing a slightly modified Twitter Bootstrap with Google Web fonts, and the font causing the issue is Oswald from Googl ...

csstwitter-bootstrapgoogle-webfontsletter-spacing

why is the fetchNextPage method in react-query not functioning as expected?

I've been attempting to implement infinite scrolling using useInfiniteQuery, but every time I call fetchNextPage, it just ends up re-fetching the initial page. I've scoured the React Query documentation and meticulously reviewed my code, yet I ha ...

reactjsnext.jsreact-query

Parallel Execution Issue with RxJS Observable forkJoin

Struggling to understand why my requests aren't executing concurrently with the following code. As a newcomer to RxJS and observables, I would greatly appreciate any guidance on improving this snippet below. Essentially, I am fetching data from a REST ...

javascriptangulartypescriptrxjsrxjs-observables

Experimenting with enzyme to test React portals

I've run into a challenge while attempting to write tests for a modal component using React fiber's portal. The issue arises because my modal is mounted to a domNode on the root of the <body />, but since that domNode doesn't exist dur ...

reactjsjestjsenzymejsdom

Coordinating numerous AJAX requests in Angular with the help of Restangular

I am currently working on an Angular application that relies on $scope references to update the view using a factory singleton that exposes model and state objects. The challenge I face is ensuring that multiple AJAX calls (using Restangular) made by the f ...

javascriptajaxangularjspromise

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

jqueryhtmlcsstwitter-bootstrap-3css-shapes

Unable to retrieve data in react/next js despite being able to log it in the console

I am currently utilizing Next Js (React Js) for building my Web app. I have integrated graphql to fetch data from the database successfully, but facing issues in rendering it on the screen. What steps should I take next? import Link from 'next/link&ap ...

reactjsjsonnext.jsconsole.log

Tips for adjusting the color of the white tick in Material UI Checkbox with React and JavaScript

I'm currently attempting to customize the default white tick (not the checkbox background!) and change it to a different color that I choose. While I have come across solutions for earlier versions of MUI and React, I am specifically looking for a sol ...

javascriptreactjscheckboxmaterial-uicustomization

Ensure that the loader remains visible until all data has been successfully retrieved from the AngularJS service

Currently, I am facing an issue with the implementation of angularjs ui-router for state transitions along with a loader assigned to each view. The problem arises when moving from one state to another and the loader disappears before all the content from t ...

javascriptangularjs

Tips for successfully passing multiple properties to a function in React

<DeleteForeverIcon className={classes.deleteHwIcon} onClick={() => { deleteHomework(value.name, value.class); }} /> I'm looking to modify the function deleteHomework so that it can receive two properties instead of just one. In add ...

javascriptreactjsexpresshttpaxios

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project

My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery examp ...

javascriptreactjsnext.jsswiper.js

Retrieving information from a JSON source to populate a data table

Hello fellow developers... I'm currently facing an issue while trying to dynamically populate a data table with information fetched through a fetch request and stored in a Vuex instance variable. Here is the relevant code snippet: <script> impo ...

javascriptjsonvue.jsvuexv-data-table

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can this be achieved using CSS? If .div1 is not present, enforce the following rule: .div2{ property: value; } For example, <div class="div1"> ... </div> <div class="div2"> <!-- it exists, so no action needed --> </div& ...

htmlcsscss-selectors

Is there a way to dynamically adjust the font size to perfectly fit the content within a div?

There is a division element containing text: <div style="white-space:nowrap;overflow:none;width:50px;"> With some text in it </div> Is there a way to adjust the font size of the text within the division so that all of the content is display ...

css

Leveraging both the value from getStaticProps and the parameter in the component within NextJS

With this code snippet, I am attempting to load markdown files from a specific directory and pass them to a component that will display one of the markdown files based on a specified parameter. However, I am encountering an error when trying to use the com ...

reactjstypescriptnext.js

What is the best way to correctly render several React components using a single index.js file?

I am facing an issue with rendering two React component classes. One class creates a counter and works fine, while the other class generates a simple string wrapped in HTML tags but does not render. I have tried various tutorials to troubleshoot this probl ...

javascriptreactjs