:wave: I have text field style component and "typography" style component. The text field defines i...

# kobweb

[Filip Wiesner]

👋 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]

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]

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

[David Herman]

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

[David Herman]

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]

You can also try using the variant concept?

[David Herman]

HeadlineSmall feels like it could be a variant

[David Herman]

And then you'd get more specificity in your declaration

[David Herman]

https://github.com/varabyte/kobweb#componentvariant in case you haven't seen that yet

[Filip Wiesner]

Hmmm, thats unfortunate 😕 Looks like I need to learn a lot about CSS so I don't get stuck on these things 😅 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]

Yeah, variants are the proper way I think

[Filip Wiesner]

But the global style order feature sounds cool!

[David Herman]

But the global style order feature sounds cool!

Maybe! But this is an easy way to get yourself in trouble in larger codebases

[David Herman]

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

[Filip Wiesner]

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]

Should this work?

[Filip Wiesner]

I guess I have to use the style in base {} directly

Ah, but I cannot use the toModifier() inside ComponentModifiers block 😕

[David Herman]

I'm not following

[David Herman]

Your variant should be updating the font size or whatever

[David Herman]

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]

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

[Filip Wiesner]

But I don't want to redefine my typography component

[Filip Wiesner]

I want to use the component, not copy&paste the contents

[David Herman]

You shouldn't have to copy paste any styles

[David Herman]

Just define the styles that are different

[Filip Wiesner]

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

[David Herman]

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

[Filip Wiesner]

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]

Why not make those both variants to text field style?

[David Herman]

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]

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

[David Herman]

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]

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]

You probably don't want to use extraModifiers normally

[David Herman]

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

[David Herman]

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

[Filip Wiesner]

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

[Filip Wiesner]

The modifier way works. Thanks 🙌

[David Herman]

Honestly, I need to document it better!!

[David Herman]

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