CSS for custom widgets is sometimes unintuitive

[TomJGooding]

I've sometimes found updating the CSS for custom widgets to be unintuitive, especially with the introduction of themes.

Here's a simple example with a custom widget that extends the DataTable. I think you would expect the background to be red.

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


class MyDataTable(DataTable):
    DEFAULT_CSS = """
    MyDataTable {
        background: red;
    }
    """


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield MyDataTable()

    def on_mount(self) -> None:
        table = self.query_one(MyDataTable)
        table.add_column("Column")
        table.add_rows([f"Row {i}"] for i in range(1, 10))


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

But you'd need to dig into the source code and understand that you also need to change this:

class MyDataTable(DataTable):
    DEFAULT_CSS = """
    MyDataTable {
        background: red;

        &:dark {
            background: red;
        }
    }
    """

I understand that widget CSS is sometimes necessarily complex, especially now with themes, but perhaps there's a way to make changing the CSS more intuitive?

[github-actions]

We found the following entry in the FAQ which you may find helpful:

• How do I center a widget in a screen?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory