Merge pull request meshery#11647 from rishabhsharma1997/master

Fix background Color of InputField in rjsf
singh1203 · Aug 15, 2024 · 662a424 · 662a424
2 parents a5c14bd + f364a4c
commit 662a424
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/ui/components/MesheryMeshInterface/PatternService/RJSFCustomComponents/CustomBaseInput.js b/ui/components/MesheryMeshInterface/PatternService/RJSFCustomComponents/CustomBaseInput.js
@@ -1,12 +1,27 @@
 import React from 'react';
-import { IconButton, InputAdornment, TextField, useTheme, InputLabel } from '@material-ui/core';
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  useTheme,
+  InputLabel,
+  styled,
+} from '@material-ui/core';
 import HelpOutlineIcon from '../../../../assets/icons/HelpOutlineIcon';
 import { CustomTextTooltip } from '../CustomTextTooltip';
 import ErrorOutlineIcon from '../../../../assets/icons/ErrorOutlineIcon';
 import { ERROR_COLOR } from '../../../../constants/colors';
 import { iconSmall } from '../../../../css/icons.styles';
 import { makeStyles } from '@material-ui/styles';
 
+const CustomTextField = styled(TextField)(({ theme, overrideFlag }) => {
+  return {
+    '& div': {
+      backgroundColor: overrideFlag ? (theme.palette.type === 'dark' ? '#303030' : '#fff') : '',
+    },
+  };
+});
+
 const BaseInput = (props) => {
   const additional = props.schema?.__additional_property; // check if the field is additional
   const xRjsfGridArea = props.schema?.['x-rjsf-grid-area']; // check if the field is used in different modal (e.g. publish)
@@ -29,7 +44,6 @@ const BaseInput = (props) => {
       borderRadius: '3px',
     },
   }));
-
   const theme = useTheme();
   const classes = styles();
   return (
@@ -40,10 +54,11 @@ const BaseInput = (props) => {
             {prettifiedName}
           </InputLabel>
         )}
-        <TextField
+        <CustomTextField
           variant={additional ? 'standard' : 'outlined'}
           size="small"
           focused={focused}
+          overrideFlag={props.formContext.overrideFlag}
           type={props.options?.inputType}
           key={props.id}
           disabled={props?.disabled || props?.readonly}

diff --git a/ui/themes/rjsf.js b/ui/themes/rjsf.js
@@ -245,7 +245,7 @@ const darkRjsfTheme = createTheme({
   overrides: {
     MuiOutlinedInput: {
       root: {
-        backgroundColor: '#303030',
+        // backgroundColor: '#303030',
       },
     },
     MuiButton: {