wave I have text field style component and typography style

Question

wave I have text field style component and typography style component The text field defines it s own text size but I want to override the size using the typography style component How would I enforce the order of CSS rules so that the text size can be overridden Right now the textfields own text size defined in `extraModifiers` is there even if I add the modifier after the textfield style

Filip Wiesner · Answer

The problem is that order of classes defined on HTML element does not matter Only the order in the CSS file matters so the order of component style modifiers does not matter

David Herman · Answer

Ah yeah in that case maybe use inline styles This is a nightmare in css too

David Herman · Answer

CSS has a concept code smell called important that I don t think works in Compose HTML

David Herman · Answer

It s possible I should add a priority concept to Kobweb in order to control the order that styles are registered into the global stylesheet in order

David Herman · Answer

You can also try using the variant concept

David Herman · Answer

HeadlineSmall feels like it could be a variant

David Herman · Answer

And then you d get more specificity in your declaration

David Herman · Answer

<https github com varabyte kobweb componentvariant|https github com varabyte kobweb componentvariant> in case you haven t seen that yet

Filip Wiesner · Answer

Hmmm thats unfortunate confused Looks like I need to learn a lot about CSS so I don t get stuck on these things sweat smile Took me some time to figure out what is the issue and it s really not intuitive Especially when I am used to certain behavior of `Modifier`s

Filip Wiesner · Answer

Yeah variants are the proper way I think

Filip Wiesner · Answer

But the global style order feature sounds cool

David Herman · Answer

gt But the global style order feature sounds cool gt Maybe But this is an easy way to get yourself in trouble in larger codebases

David Herman · Answer

Try the variant approach first If it doesn t work for you let me know

Filip Wiesner · Answer

I tried the variant approach with `extraModifiers` and that also does not work I guess I have to use the style in `base ` directly

Filip Wiesner · Answer

Should this work

Filip Wiesner · Answer

gt I guess I have to use the style in `base ` directly Ah but I cannot use the `toModifier ` inside `ComponentModifiers` block confused

David Herman · Answer

I m not following

David Herman · Answer

Your variant should be updating the font size or whatever

David Herman · Answer

<https github com varabyte kobweb blob 18e6345b4019f0022a8656e1309849843d0e75a0 examples helloworld src jsMain kotlin helloworld components sections NavHeader kt L39|https github com varabyte kobweb blob 18e6345b4019f0022a8656e1309849843d0e75a0 examples helloworld src jsMain kotlin helloworld components sections NavHeader kt L39> is an example of how to implement a variant

David Herman · Answer

If that s still confusing the higher level question is what is the final combination of styles you want

Filip Wiesner · Answer

But I don t want to redefine my typography component

Filip Wiesner · Answer

I want to use the component not copy amp paste the contents

David Herman · Answer

You shouldn t have to copy paste any styles

David Herman · Answer

Just define the styles that are different

Filip Wiesner · Answer

That s all of them Font weight size height and spacing Maybe I am bad at explaining Should I start over

David Herman · Answer

Sure It sounds like you have a component style you defined in one place and another component style you defined somewhere else

Filip Wiesner · Answer

Yes in this context I have 3 `ComponentStyle`s `val TextFieldStyle by ComponentStyle extraModifiers = TypographyTitleMedium toModifier ` this has default size of this text field defined using `TypographyTitleMedium` component `val TypographyTitleMedium by ComponentStyle base ` used in the text field by default `val TypographyHeadlineSmall by ComponentStyle base ` used in a modifier when calling `TextField` component The problem The `TypographyTitleMedium` is defined after `TypographyHeadlineSmall` so I cannot override the default TextField typography CSS class and I don t want to redefine the Typography component in the text field file

David Herman · Answer

Why not make those both variants to text field style

David Herman · Answer

Alternately you can just make global Modifier values for the typography settings and pass those in as inline styles will always take precedence

David Herman · Answer

I think those are your two options now text field variants or raw modifiers

David Herman · Answer

Note that you can have a variant definition return a global Modifier so you can create multiple variants for different styles while still sharing common code

Filip Wiesner · Answer

So I would still use `extraModifiers` but with 2 variants and the text field would have default variant base would never be used But using raw modifier instead of component style for the typography is good idea

David Herman · Answer

You probably don t want to use extraModifiers normally

David Herman · Answer

That s mostly reserved for attributes since you can t set those in a css stylesheet

David Herman · Answer

You can use it the way you are but I would suggest using it as a last resort

Filip Wiesner · Answer

Yeah I guess this is why I should not use it smile Mistakes are the best way to learn I guess

Filip Wiesner · Answer

The modifier way works Thanks raised hands

David Herman · Answer

Honestly I need to document it better

David Herman · Answer

This whole thing is definitely pretty rough but I m glad you asked me And I m glad you re working