打扮界面：组件、props 与样式

到目前为止，我们已经很自然地用上了 rx.button、rx.heading、rx.box 这些组件。这一课来梳理一下创建、组合和美化组件的规则。规则只有两条。

5-1. 组件就是函数的返回值（1 分钟）

组件是构成界面的零件，比如按钮、文字、图片。Reflex 内置了大量基础组件，只要写一个返回组件的函数，就得到了你自己的组件。

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

5-2. 规则一：位置参数是子组件（2 分钟）

要把其他组件放进某个组件里，就用位置参数传进去。下面的 rx.text 和 my_button() 都是 rx.box 的子组件。用其他函数创建的组件，直接调用后放进去就行。

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

如果找不到想要的组件，可以用 rx.el 直接使用 HTML 标签。rx.el.div 就是 <div>，rx.el.p 就是 <p>。

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

如果这样还不够，还可以把 npm 上的 React 组件封装起来使用。

5-3. 规则二：关键字参数是 props 和样式（2 分钟）

组件的行为和外观由关键字参数决定，这些参数称为 props。每个组件都有自己特有的 props，第一次使用某个组件时，请先到文档里查一查它有哪些 props。

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

除了组件特有的 props，还可以直接把 CSS 属性当作 props 传入来调整样式。

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

总结一下，组件由子组件和 props 组成。

第1课里像 rx.heading(MyState.count, color=MyState.color) 这样把 Var 同时用作子组件和 props，遵循的也正是这两条规则。

课后练习

1. 给 round_button 加上 color_scheme="green" 和 size="3"。
2. 给 my_container 的 rx.box 设置 padding="16px"、border="1px solid #ccc"、border_radius="12px"，把它做成卡片的样子。
3. 如果把 rx.progress 的 value 换成第1课的 CounterState.count，会怎么样？试着让进度条随着每次点击按钮逐渐填满。

本课检查清单

• 能说出位置参数和关键字参数分别会变成什么。
• 能把 CSS 属性改写成 snake_case 的 props 来使用。
• 找不到需要的组件时，会用 rx.el。