Custom className for layouts and Controls react

General
1

I’m looking for a way to change the direction of an array of checkboxes from horizontal to vertical. And also I would like to change VerticalLayout and HorizontalLayout direction accoding to breakpoints. I am using mui. I can override the behavior via a theme, but I need to apply it to certain layouts, not for all.
I also did not find the opportunity to add a custom class. Do I need to write a custom layouts or Control (for enums) to implement this behavior? Нere on the forum I found topics about vanilla js custom classes, but I use react.

My schema for enum.

{
  "schema": {
    "type": "object",
    "properties": {
        "infrastructure": {
        "type": "array",
        "items": {
          "type": "string",
          "enum": [
                item1,
                item2,
                ...
               itemN
             ]
           },
          "uniqueItems": true
         }
        ...

My uischema:

       {
        "type": "Category",
        "i18n": "step_infrastructure",
        "elements": [
          {
            "type": "Control",
            "scope": "#/properties/infrastructure"
          }
        ]
      },
2

Hi @Natatashkin,

If you implement a custom renderer (you can start by copy/pasting the existing one) then you can render in any way you like.

If you need a CSS customization to apply only for certain layouts and not for all, then you definitely need a custom renderer to somehow manifest that distinction.

Adding custom CSS classes is currently only implemented for the Vanilla renderer sets.

1 Like