How can i change the style of a form title?

[yldshv]

Hello again :D,

In this screenshot, you can see the title "Vorlage - Alle Feldtypen" of the form, which is included through the schema. I have done some research, but unfortunately, I haven't found a way to modify the styling. Can you please provide guidance on where I can do that?

[Hyperkid123]

Hello @yldshv

The mui Form template has API to style its individual components. For the title, you can follow this example: https://stackblitz.com/edit/rrf8pj?file=index.js

In general, it is very difficult to create templates that fit all use cases. If you need some extensive changes to the template itself, it is always recommended to create a custom template.

Customization options of default templates is listed here: https://www.data-driven-forms.org/components/form-template#heading-defaultformtemplates

[yldshv]

Hi @Hyperkid123 ,
thanks for your anser!
Unfortunately, that's not sufficient for me. I am building a Web Component and integrating it into another app. The style of the title is not being properly adopted there, so I wanted to style it myself using standard CSS (this will work i have done that for some other stuff already). Do you know a way I could implement this?

[Hyperkid123]

@yldshv you can use classic CSS. The title component accepts className as a prop. You can check the typography component examples and API here: https://mui.com/material-ui/react-typography/

We do not limit what props one can send to the components.

[yldshv]

@Hyperkid123

like this it doesnt work...is that wrong?

[rvsia]

className should be a name of the class. For passing CSS object, you should use style prop.

[Hyperkid123]

You have created a style prop not class based CSS. I suggest checking the API and examples available here: https://mui.com/material-ui/api/typography/#typography-prop-classes

I've updated the sandbox to pass styles prop as well. You can see the color of the title should be now red.

[yldshv]

Thank you guys!