Css With ReactPy

[dittttfrs]

how to add css in ReactPy?
how to style to spesifc class in ReactPy?

[rmorshea]

You can include CSS in your apps by using html.link. For example:

html.link({"href": "url/to/your/stylesheet.css", "rel": "stylesheet"})

Alternatively, if you want to write raw CSS you can just use html.style:

html.style("""
.my-class {
  color: #26b72b;
}
""")

At that point you need only add "my-class" as a style to your elements:

html.div({"class": "my-class"}, ...)

[dittttfrs]

html.link({"href": "url/to/your/stylesheet.css", "rel": "stylesheet"})
why is the css style unreadable for this code?
I think I have entered the css file directory correctly

[rmorshea]

In the expression:

html.link({"href": "url/to/your/stylesheet.css", "rel": "stylesheet"})

url/to/your/stylesheet.css is a URL, not a file path. If you want to use a file path, you must server it first:

# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from reactpy import component, html
from reactpy.backend.fastapi import configure

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

@component
def example():
    return html.div(
        html.link({
            "href": "/static/stylesheet.css",  # URL of stylesheet on the server
            "rel": "stylesheet"
        }),
        ...
    )

configure(app, example)

You should then place your stylesheet.css inside ./static on your local machine.

If you'd rather not serve it as a static file, then you can read in the content of your file into html.style:

# main.py
from pathlib import Path
from fastapi import FastAPI
from reactpy.backend.fastapi import configure

app = FastAPI()
stylesheet_css = Path("static/stylesheet.css").read_text()

@component
def example():
    return html.div(
        html.style(stylesheet_css),
        ...
    )

configure(app, example)

To run these examples be sure to pip install "uvicorn[standard]" before running:

uvicorn main:app --reload

[Mosesoyet]

For flask backend, it would be something like this,

html.link(
{
"href": url_for('static', filename='file.css'),
"rel": "stylesheet",
"type": "text/css"
}
)