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 some tweaks to help 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

[TomJGooding]

Closed as stale. There might be a few other places where the default CSS could be tweaked (similar to my fix for the DataTable), but without checking the code for every widget it is probably better just to handle this on a case-by-case basis.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.