Style

Add a custom piece of CSS.

@solara.component
def Style(value: Union[str, Path] = ""):

    ...

Note that this is considered an advanced feature, and should be used with caution.

Example

from pathlib import Path
import solara


@solara.component
def Page():
    solara.Style(Path("style.css"))
    solara.Button("Click me", classes=["company-style-button"])

Arguments

value: The CSS string of CSS file to insert into the page. In development mode (the default) when a Path argument is passed, the file will be watched for changes, and the CSS will be reloaded when the file changes. In production mode, the CSS will be inserted once, and not reloaded.

Example

Use CSS

CSS Example that styles the button below

    .mybutton {
        font-family: Serif;
    }

    /* this selector has to be very specific to override the vuetify style */
    .v-btn.mybutton {
        color: #4CAF50; /* Green */
    }
    /* vuetify's background color css has very high CSS-specificity, so we use !important */
    .mybutton {
        background-color: #FF9800 !important; /* Orange */
    }

View source