Change MinWidth of a mTab

[blilleike]

I do not understand why some styles are respected and some are not. e.g. th width of a mTab component

                    mTab(label = "Recommended", value = ListItemOption.Best) { css {
                        minWidth = 20.px
                        width = 20.px
                    } }

does not render any different then the other tabs (and way to wide) I searched the solved issues and tried https://github.com/cfnz/muirwik/issues/23 But did not help.

Setting the width of the mTabs works fine, but now tabs must be scrollable so that all fit on the screen.

Please give me some advice how or where to adapt this styles

[cfnz]

Not much help, but I just tried it in the demo app and it worked for me. The demo apps mTabs have MAppBarPosition.static, maybe that has something to do with it. I can give it a minWidth = 20.px and the width reduces the specified tab. Anything further and you will need to play with padding rather than minWidth.

The thing I usually do if having trouble getting CSS to apply (after making sure things from #23 are sorted) is play with the app in the browser development tools and explore the css. Try changing things in the browser to see what it does, once you find that out, move back to Kotlin and try the same thing.

[blilleike]

It was great help. Even if it should have been kind of obvious to have a look into the testapp if I can reproduce the problems there. It worked fine there and I started to compare he differences.

In the end I hadn't included the mCssBaseline correctly in the base render loop. With hat in place setting minWidth worked as expected.

Can you give the extra Tipp how you define global styles in kotlin to be used e.g. for all mTab-instances?

[cfnz]

There are at least a couple of ways to achieve this, plain old css and in code. Since I haven't done this before, I thought I would give it a quick try in-code to start with... stumped me for a bit (well, still has, but have a work around)...

First the simple version... use plain old css... easy... Create a file, say in resources/css/tab-override.css that has

.MuiTab-root {
    min-width: 30px;
}

Then in the index.html of the app, add a link to the stylesheet after the jss insertion point:

    ...
    <!-- jss-insertion-point -->
    <link rel="stylesheet" href="css/tab-override.css">
</head>

That's it.. The in-code version involves modifying the theme. This was a little more tricky as examining the styles it had a @media query in it... adding the @ in the js string constant, quoted appropriately, still came out in the compiled js as unquoted, which the compiler didn't like... I have not yet solved that, however, an alternative is to use !important. So, for the sake of completeness, the in code version could be like this (the dark/light stuff is unrelated, but is from the test app): Where you create the theme (refer to the App.kt of the test app), add a themeOption...

        ...
        themeOptions.overrides = js("""({
            MuiTab: {
                root: {
                    minWidth: '20px !important',
                }
            }
        })""")

        mThemeProvider(createMuiTheme(themeOptions)) {
            mainFrame("Intro") { setState { themeColor = if (themeColor == "dark") "light" else "dark" } }
        }