https://kotlinlang.org logo
Title
f

Filip Wiesner

04/16/2023, 6:43 PM
👋 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.
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.
d

David Herman

04/16/2023, 6:52 PM
Ah yeah, in that case maybe use inline styles? This is a nightmare in css too
CSS has a concept/ code smell called important that I don't think works in Compose HTML
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
You can also try using the variant concept?
HeadlineSmall feels like it could be a variant
And then you'd get more specificity in your declaration
https://github.com/varabyte/kobweb#componentvariant in case you haven't seen that yet
f

Filip Wiesner

04/16/2023, 6:58 PM
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
Yeah, variants are the proper way I think
But the global style order feature sounds cool!
d

David Herman

04/16/2023, 7:02 PM
But the global style order feature sounds cool!
Maybe! But this is an easy way to get yourself in trouble in larger codebases
Try the variant approach first! If it doesn't work for you let me know
f

Filip Wiesner

04/16/2023, 7:06 PM
I tried the variant approach with
extraModifiers
and that also does not work. I guess I have to use the style in
base {}
directly
Should this work?
I guess I have to use the style in
base {}
directly
Ah, but I cannot use the
toModifier()
inside
ComponentModifiers
block 😕
d

David Herman

04/16/2023, 7:15 PM
I'm not following
Your variant should be updating the font size or whatever
If that's still confusing, the higher level question is what is the final combination of styles you want?
f

Filip Wiesner

04/16/2023, 7:36 PM
But I don't want to redefine my typography component
I want to use the component, not copy&paste the contents
d

David Herman

04/16/2023, 7:36 PM
You shouldn't have to copy paste any styles
Just define the styles that are different
f

Filip Wiesner

04/16/2023, 7:38 PM
That's all of them. Font weight, size, height and spacing. Maybe I am bad at explaining. Should I start over?
d

David Herman

04/16/2023, 7:39 PM
Sure. It sounds like you have a component style you defined in one place and another component style you defined somewhere else?
f

Filip Wiesner

04/16/2023, 7:45 PM
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.
d

David Herman

04/16/2023, 7:53 PM
Why not make those both variants to text field style?
Alternately, you can just make global Modifier values for the typography settings and pass those in, as inline styles will always take precedence
I think those are your two options now -- text field variants or raw modifiers
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
f

Filip Wiesner

04/16/2023, 7:57 PM
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
d

David Herman

04/16/2023, 7:58 PM
You probably don't want to use extraModifiers normally
That's mostly reserved for attributes, since you can't set those in a css stylesheet
You can use it the way you are but I would suggest using it as a last resort
f

Filip Wiesner

04/16/2023, 8:01 PM
Yeah I guess this is why I should not use it 😄 Mistakes are the best way to learn I guess
The modifier way works. Thanks 🙌
d

David Herman

04/16/2023, 8:39 PM
Honestly, I need to document it better!!
This whole thing is definitely pretty rough, but I'm glad you asked me! And I'm glad you're working.