How to control property title size in nested schema?

[DomasM]

Version(if relevant): 1.0.0

7.20.3

Environment(if relevant):

Vue 2.6.6

My schema is few levels deep, i.e. object contains object which contains list, which contains object. Title font size is the same for all titles, with default class h3. If I set className property in schema to something and override font-size property via css, font-size changes only for the titles of properties in deepest elements. I would like to to be able to set different font sizes for titles of objects/lists in my schema.

[plantain-00]

You can set css like .schema-based-json-editor--row h3 { font-size: '12px' }: https://github.com/plantain-00/schema-based-json-editor#improve-current-theme

or add className in schema, then set its css: https://github.com/plantain-00/schema-based-json-editor#non-standard-fields

[DomasM]

Thank you for help, but I am aware of these possibilities. Why I can't make them work: Option no1: all the titles are h3, so I can't make them different. Option no2: this changes font size only for deepest objects properties titles, see image, I expected to change font size for '3. Interaction power measurements'

[plantain-00]

What's your style of bigfont? Can you try these?

.bigfont > h3 { font-size: '12px' }
.bigfont > label { font-size: '12px' }
.bigfont h3 { font-size: '12px' }
.bigfont label { font-size: '12px' }

[DomasM]

Thank you, it looks like don't really know how to use css. This is the most reasonable result I have. I still need to redefine style for children elements to avoid modifying them, e.g. lines .bigfont h3 { font-size: 22px } and .bigfont2 h3 { color: black }