Get component styles with focus

[mattthhh]

Hello there. I do dynamic CSS in the Python code for the widget OptionList, and I get the RenderStyles with get_component_classes from DOMNode, but I want to get the same for OptionList:focus. Is it possible ?

If it's too hard, I just want to remove this style in default CSS of the widget :

OptionList:focus > .option-list--option-highlighted {
    background: $accent;
}

Maybe this way is easier but idk how to do it...

[TomJGooding]

It sounds like you could do this simply with CSS or by creating your own custom widget that inherits from OptionList?

[mattthhh]

Yes but I need to redefine all the Default CSS which is quite not worth. The best way to do this is to just add a class when focus is on the widget, and create two rules in CSS to dispatch both

[TomJGooding]

Sorry I'm afraid I don't quite understand what you mean here. But just to clarify in case it helps, the DEFAULT_CSS is inherited by default which means you only need to override the styles you want. Here's a simple example, notice that all other styling such as the border is still inherited:

from textual.app import App, ComposeResult
from textual.widgets import OptionList


class MyOptionList(OptionList):
    DEFAULT_CSS = """
    MyOptionList:focus > .option-list--option-highlighted {
        background: yellow;
    }
    """


class OptionListApp(App):
    def compose(self) -> ComposeResult:
        yield MyOptionList("Foo", "Bar", "Baz")


if __name__ == "__main__":
    app = OptionListApp()
    app.run()

[mattthhh]

Yes, sry my English is really not good. I understood how to do sub-classes and modigy the ClassVar , but this not resolve my problem because I want to change properties of this selector dynammically in the Python code by getting the RenderStyles object (thanks to get_component_styles method). But the method doesn't cacth when CSS pseudo-classes are toggled, like :focus. Anyway, I found a workaround to toggle classes that affect this properties when focucs instead of changing it in the source code.