Imports And Styles · Wrapping React · Reflex Docs

For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.

NewReflex Agent Toolkit

NewReflex Agent Toolkit is launching. Get early access.

Overview

Onboarding

User Interface

State

Recipes

Wrapping React

When wrapping a React component, you may need to define styles and imports that are specific to the component. This is done by defining the add_styles and add_imports methods in your component class.

Imports

Sometimes, the component you are wrapping will need to import other components or libraries. This is done by defining the add_imports method in your component class. That method should return a dictionary of imports, where the keys are the names of the packages to import and the values are the names of the components or libraries to import.

Values can be either a string or a list of strings. If the import needs to be aliased, you can use the ImportVar object to specify the alias and whether the import should be installed as a dependency.

from reflex.utils.imports import ImportVar

class ComponentWithImports(MyBaseComponent):
    def add_imports(self):
        """Add imports to the component."""
        return {
            "my-package1": "my-import1",
            "my-package2": ["my-import2"],
            "my-package3": ImportVar(
                tag="my-import3", alias="my-alias", install=False, is_default=False
            ),
            "": "my-package-with-css/styles.css",
        }

The tag and library of the component will be automatically added to the imports. They do not need to be added again in add_imports.

Styles

Styles are any CSS styles that need to be included in the component. The style will be added inline to the component, so you can use any CSS styles that are valid in React.

class StyledComponent(MyBaseComponent):
    """MyComponent."""

def add_style(self) -> dict[str, Any] | None:
        """Add styles to the component."

return rx.Style({
            "backgroundColor": "red",
            "color": "white",
            "padding": "10px",
        })

Built with Reflex - Reflex