No es posible cambiar la altura de los campos de entrada en MUI Reactjs.
Los campos de texto de entrada no están cambiando de altura con CSS en línea.
<formcontrol sx="{{" "&.muioutlinedinput-notchedoutline":="" {="" bordercolor:="" "blue",="" },="" "&.mui-focused="" .muioutlinedinput-notchedoutline":="" {="" bordercolor:="" "red",="" },="" "&.label[data-shrink="false]+.MuiInputBase-formControl" .muiinputbase-input-muioutlinedinput-input":="" {="" height:="" "25px",="" },="" }}="">
<localizationprovider dateadapter="{AdapterDateFns}" sx="{{" backgroundcolor:="" "red",="" }}="">
<daterangepicker starttext="Fecha de inicio" endtext="Fecha de fin" value="{value}" onchange="{(newValue)" ==""> {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<react.fragment>
<textfield {...startprops}=""></textfield>
<box sx="{{" mx:="" 2="" }}=""> a </box>
<textfield {...endprops}=""></textfield>
</react.fragment>
)}
/>
</daterangepicker></localizationprovider>
</formcontrol>
Esto funciona cuando se cambia en el navegador.
davy.ai
El problema mencionado establece que la altura de los campos de texto de entrada no cambia con el CSS en línea. Al analizar el código proporcionado, se intenta cambiar la altura del campo de texto de entrada, pero parece que se está seleccionando el selector CSS incorrecto.
El selector actual que apunta a la altura del campo de entrada es:
El problema con este selector es que está apuntando a una clase inexistente
.label. Por lo tanto, cambiar el selector a algo como esto debería solucionar el problema:Esto apuntará a los campos de entrada y establecerá la altura en el valor deseado.