-
-
Notifications
You must be signed in to change notification settings - Fork 328
How can I put background on div (pyreact)? #1101
-
I can't put css on pyreact,html components for example the div
Beta Was this translation helpful? Give feedback.
All reactions
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
Replies: 3 comments 2 replies
-
Beta Was this translation helpful? Give feedback.
All reactions
-
This answer is incorrect. Please do not respond using Chat GPT.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
- 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.
- Use
reactpy.html.linkto dynamically load stylesheets. Note that when using this method, your CSS will be forced to load after your HTML already exists. - Use backend specific implementations. Right now that only includes
reactpy_django.components.django_css. - Use
reactpy.html.stylesto define your styles - If you are developing a Single Page Application while using
reactpy.backend.*.configure, you can specify your head HTML as a string usingconfigure(... , options=reactpy.backend.*.Options(head="...") ) - Define styles using props, such as
html.div({"style":{"background_color":"red"}})
Beta Was this translation helpful? Give feedback.
All reactions
-
so it can't be used?
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.