• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

71
Views
Componente de estilo de acuerdo con sus accesorios al crear un tema personalizado de MUI

Estoy creando un tema MUI personalizado y me cuesta diseñar el contorno con muescas de un <OutlinedInput /> notchedOutline . Simplemente quiero que cuando la entrada esté deshabilitada, el color del borde sea más claro que el color predeterminado.

Esto es lo que probé:

 const theme = { mode: 'light', primary: { main: primaryBlue, }, components: { MuiOutlinedInput: { styleOverrides: { // Ideally I could mix 'disabled' & 'notchedOutline' here notchedOutline: { borderColor: 'red' // it appear red }, disabled: { borderColor: 'green', // but not green } } } } }

¿Tienes alguna pista?

about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

¡Después de muchas pruebas y errores , finalmente logré personalizar el color del borde de la entrada deshabilitada !

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

Lo que me confundió es que la entrada en sí misma no tenía el borde. Este era un elemento hermano <fieldset class='MuiOutlinedInput-notchedOutline'>

about 3 years ago · Juan Pablo Isaza Report

0

Prueba esto :

 '&$disabled': { borderColor: 'green', },
about 3 years ago · Juan Pablo Isaza Report

0

Creo que hay algún problema con los discapacitados, o el borde no existe en discapacitados.

prueba esto

 MuiOutlinedInput: { styleOverrides: { root: { '.Mui-disabled': { border: '1px solid red', }, }, }, },
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error