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
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 */
}