How to override font size of the main menu in ApplicationFrame

Client
, ,
1

We want to increase the font size of the main menu in the application frame.
Setting theme.components.menu.mainMenu.item.fontSize doesn’t seem to work

2

@sven-fierce-needle Can you please specify Widgets version being used?

3

We are now using 34.5.0

4

@sven-fierce-needle I can override normally with below snippet:

createTheme({ baseTheme: "compact", components: { menu: { mainMenu: { item: { fontSize: "50px" } } } } }),
5

This does not work for us. Only way we can change it is using

		 .header .nav .nav__mainLayer .nav__item .nav__label .nav__text {
			// for the tabs on the main screen
			font-size: 0.875rem;
		}

Note: We are using a custom ApplicationFrameLayout that will render:

	return (
		<FrameViews.ApplicationFrameLayout
			{..._props}
			title={props.title || localizer(LOCALE_RESOURCE_KEYS.application.title)}
			additionalHeaderItems={additionalHeaderItems}
			permissions={permissionsArray}
		/>
	);

Also: We create our theme by doing return merge(flatCompactTheme, { components: componentsTheme });

6

Can you use the createTheme function instead? something like this:
createTheme({
baseTheme: “flat-compact”,
components: { menu: { mainMenu: { item: { fontSize: “30px” } } } }
})

If you create the menu yourself, please also set the useAs prop to “main”.

7

We do not create the Menu ourself, as we still use the

FrameViews.ApplicationFrameLayout

Using createTheme does not work this way (in 34.5.0).

Object literal may only specify known properties, and 'baseTheme' does not exist in type 'DeepPartial<DefaultThemeType>'.

The change of A12W-9444 that will enable this is in 34.6 (with a release date of today :slight_smile: )

8

@sven-fierce-needle Indeed. Can you try wit 34.6? it’s already release :slight_smile:
Can you inspect the React tree if the useAs prop is set correctly?

9

I tried using 34.6 and using the a12 application frame layout without our own wrapper, didn’t work either.

grafik

The useAs prop isn’t set:
grafik
Neither on the MenuContainer, nor in the contained MainMenu or the Item

10

Hi, which client version do you use? The useAs="main" prop is only set correctly since client 12.3.0 (202206-ext4)

11

We were using client-core@12.1
Do you have a bug ticket for me to link own ticket to?

12

The overall ticket for this change was A12-13742