Subclass for input field

General
1

Perhaps this question isn’t Backendless specific and out of bounds to ask… we would like to change the appearance for an instance of a ‘filled’ input field by giving it a class with codeless logic. Defining a class or subclass in an extension doesn’t seem to work on MUI components. Perhaps there is some trick?

For example, to make the background color of an input field be red we can do:

.MuiInputBase-input {
  background: red;
}

But this of course changes ALL input fields to look like this:

image
image784×140 4.67 KB

Trying to assign a class “loading” s defined by

.loading {
  background: red;
}

to the input component in Class List logic doesn’t do anything. Creating subclasses in the extension like

.MuiInputBase-input {
  &.loading {
    background: red !important;
  }
}

also doesn’t work.

We also tried using the example CSS as described here but this also didn’t work :roll_eyes:

Is there a special way to target a specific instance of a ‘filled’ input field with a class defined in an extension that can be used in UI Builder?

2

Hello @Alex_Klein

Your variant doesn’t work because it doesn’t match the Input HTML structure. MuiInputBase-input is a nested element of the input itself.

image
image830×239 35.2 KB

Could you try:


.loading {
  .MuiInputBase-input {
    background: red !important;
  }
}
3

Thanks for thinking about this. Your code works, thank you :slight_smile: