Making it look good: components, props and style

So far you've been using components like rx.button, rx.heading and rx.box without giving them much thought. In this lesson, we'll lay out the rules for creating, composing and styling components. There are just two.

5-1. A component is what a function returns (1 min)

A component is a building block of the page, like a button, some text or an image. Reflex ships with plenty of built-in components, and any function that returns a component becomes a component of your own.

def my_button():
    return rx.button("Click Me")

5-2. Rule 1: positional arguments are children (2 min)

To put components inside another component, pass them as positional arguments. Below, rx.text and my_button() are children of rx.box. Components built in other functions go in the same way: just call them.

def my_container():
    return rx.box(
        rx.text("This is a page"),
        # Reference components defined in other functions.
        my_button(),
    )

When there's no component for what you need, you can use HTML tags directly with rx.el. rx.el.div is <div>, and rx.el.p is <p>.

def my_div():
    return rx.el.div(
        rx.el.p("Use base html!"),
    )

And if that's still not enough, you can wrap React components from npm and use them too.

5-3. Rule 2: keyword arguments are props and style (2 min)

You control how a component behaves and looks with keyword arguments, called props. Every component has its own props, so when you use one for the first time, check the docs to see what's available.

def half_filled_progress():
    return rx.progress(value=50)

Besides a component's own props, you can also pass CSS properties directly as props to style it.

def round_button():
    return rx.button("Click Me", border_radius="15px", font_size="18px")

To sum up, a component is made of children and props.

In Lesson 1, when you passed Vars both as children and as props, as in rx.heading(MyState.count, color=MyState.color), you were following exactly these two rules.

Exercises

1. Add color_scheme="green" and size="3" to round_button.
2. Give the rx.box in my_container padding="16px", border="1px solid #ccc" and border_radius="12px" to turn it into a card.
3. What happens if you set the value of rx.progress to CounterState.count from Lesson 1? Make the bar fill up with every button click.

Checkpoint

• You can say what positional and keyword arguments each become.
• You can rewrite CSS properties as snake_case props.
• You can reach for rx.el when the component you need doesn't exist.