Important question - Styling

#1

Hi again, thanks for your previous answers - got that working. However, how do we manually make small changes to the styling? I’ve seen a few confusing entries in the documentation, but is there a simple step-by-step approach to being able to add margin to each vertical layout item and such?

We’re also using JSS as opposed to stylesheets.

[original thread by Joey Clover]

#2

[Edgar Müller]

Currently there’s no declarative way of handling that, you’ll need to ship your own vertical layout renderer. The steps would be the following:

#3

[Edgar Müller]

  1. Create a layout renderer with your customization, e.g. the following is the default vertical layout renderer with increased spacing
#4

[Edgar Müller]

import React from 'react';
import { connect } from "react-redux";
import { mapStateToLayoutProps, VerticalLayout, StatePropsOfLayout, RankedTester, uiTypeIs, rankWith } from "@jsonforms/core";
import { renderLayoutElements } from "@jsonforms/material-renderers";
import { Hidden, Grid } from "@material-ui/core";

export const VLayout = ({ uischema, schema, path, visible, renderers }: StatePropsOfLayout) => {
  const verticalLayout = uischema as VerticalLayout;

  return (
    <Hidden xsUp={!visible}>
      <Grid
        container
        direction='column'
        spacing={40}
      >
        {renderLayoutElements(verticalLayout.elements, schema, path, renderers)}
      </Grid>
    </Hidden>
  )
};

export default connect(mapStateToLayoutProps)(VLayout);

export const vLayoutTester: RankedTester = rankWith(
  2,
  uiTypeIs('VerticalLayout')
);
#5

[Edgar Müller]

  1. Create a tester (it’s already in the listing above: vLayoutTester). This tester will specify when your component should be used for rendering. The default priority for the VerticalLayout element is 1, so we override it with 2
#6

[Edgar Müller]

  1. Register your renderer with JSONForms via store.dispatch(Actions.registerRenderer(vLayoutTester, VLayout));
#7

[Edgar Müller]

Within your custom renderer you can of course use whatever styling you prefer

#8

[Joey Clover]

Thanks!!