Custom CSS Classes in UI-Schma

HI,
I wonder if it is possible to define custom css class names via the UI-Schema? At least I did not find this in the documentation.
I am using the vanilla renderer.

===
Ralph

Hi @rsoika,

Sadly this is not supported yet for the React Vanilla renderers. We implemented this only for the newer Vue Vanilla renderers.

OK, but how do you think about this? Couldn’t we just introduce a new optional attribute and evaluate it to the cell implementation (e.g. customClassName)

Somehow analogue to the ‘orientation’ feature which we added to the radio button?

Do you think this could work and would you agree with such a change?

export const TextAreaCell = (props: CellProps & VanillaRendererProps) => {
  const { data, className, id, enabled, config, uischema, path, handleChange } =
    props;
  const appliedUiSchemaOptions = merge({}, config, uischema.options);
  return (
    <textarea
      value={data || ''}
      onChange={(ev) =>
        handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
      }
     // compute additonal class names ...????
      className={className ... + appliedUiSchemaOptions.customClassName}
      id={id}
      disabled={!enabled}
      autoFocus={appliedUiSchemaOptions.focus}
      placeholder={appliedUiSchemaOptions.placeholder}
    />
  );
};

Yes something like this would work but is very specialized to the cell. I would prefer a much more generic approach like we implemented in the Vue Vanilla renderers.

For example, we hand over styles.control.input in the string renderer.

This is how the styles object is created. What happens is that:

  1. We check for form-wide style adaptions to use as a base
  2. If they don’t exist we use default styles as a base
  3. Now we check for options.styles of the respective UI Schema element with the highest priority

Step 1 and 2 is already there in React Vanilla, although it’s not as cleanly implemented. In React Vanilla some HTML elements do not receive a CSS class and some styles are hard coded and can’t be overwritten. Both of these things should be refactored.

Step 3 has no current equivalent in React Vanilla. It would be great to introduce that and should be rather simple with our already existing useVanilla HOCs. I would like to suggest to follow the same pattern as we do in Vue Vanilla in constructing such a styles object for each renderer.

In your example of a TextRenderer/Cell the respective UI Schema control could then define

options: {
  styles:  {
    control: {
      input: "my-custom-class"
    }
  }
}

And the TextAreaCell would then receive a styles object with control.input set to `“my-custom-class”.

1 Like