How can I put background on div (pyreact)?

[valeriofiorentini]

I can't put css on pyreact,html components for example the div

[sohaibaumer]

[Archmonger]

This answer is incorrect. Please do not respond using Chat GPT.

[Archmonger]

Similar to ReactJS, we do not prescribe how you add styles to your app. Listed below are some of most common ways of adding CSS.

1. Load your stylesheet within your HTML head (most common). You'll typically do this within raw HTML. Check out your backend's docs on how to do this.
2. Use reactpy.html.link to dynamically load stylesheets. Note that when using this method, your CSS will be forced to load after your HTML already exists.
3. Use backend specific implementations. Right now that only includes reactpy_django.components.django_css.
4. Use reactpy.html.styles to define your styles
5. If you are developing a Single Page Application while using reactpy.backend.*.configure, you can specify your head HTML as a string using configure(... , options=reactpy.backend.*.Options(head="...") )
6. Define styles using props, such as html.div({"style":{"background_color":"red"}})

[valeriofiorentini]

so it can't be used?

[rmorshea]

ReactPy can include CSS styles but there a number of different ways to do so. The simplest way might be to do the following with html.style:

from reactpy import html, component, run

with open("path/to/stylesheet.css") as f:
    css = f.read()

@component
def app():
    return html.div(
        html.style(css),
        ...,
    )

run(app)

As you app grows you may need to consider splitting up your style sheets into different files. In that case you could serve them from a directory and load them with html.link:

from fastapi import FastAPI
from reactpy.backend.fastapi import configure

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

@component
def app():
    return html.div(
        html.link({"rel": "stylesheet", "href": "/static/stylesheet.css"}),
        ...,
    )

With the file structure:

/
├── main.py
└── static
    └── stylesheet.css

And running the server with:

uvicorn main:server