xia的小窩

一起來coding和碼字吧

0%

Style前篇

發表於 分類於
文章字數： 807 所需閱讀時間 ≈ 3 分鐘

Reflex可以使用css的功能設計定樣式。

  1. 內嵌：用於單一元件實例樣式。
  2. 組件：用於特定類型。
  3. 全域：套用所有元素。

為了與python的標準保持一致，可以使用snake_case(蛇形命名法)。

全域版本

先寫一個範例。

1
2
3
4
5
6
7
8
9
10
class SytleState(rx.State):
    pass


def index():
    return rx.center(
        rx.heading(
            '早安啊'
        )
    )

接下來更改app的地方

1
2
3
4
5
6
7
8
9
10
# def index(): 
#     ...

style = {
    'font_family': 'Comic Sans MS',
    'font_size': '16px'
}

app = rx.App(style = style)
# ...

這是global寫法，使用字典的形式把基本樣式套用到所有的元件內，這樣的好處是不用對每個元件進行設定。

元件樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
def index():
    return rx.center(
        rx.heading(
            '早安啊'
        ),
        rx.text(
            '我是文字'
        )
    )

style = {
    rx.Heading: {
        'font_weight': '500'
    },
    rx.Text: {
        'color': 'green.500'
    }
}

結果圖如下

在這個寫法裡一樣可以寫出相同的結果，不過不同的是指定。

  1. 要注意的是寫的時候不是小寫而是大寫，我們要把類別指定成鍵，而不是建構子。
  2. 注意類別名稱和ID中的底線，reflex會自動將底線轉為格式，如果說嫌麻煩的話，那就另外拉出一個css檔寫。

內嵌

我們保留上面的style，更改一下內容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
def index():
    return rx.center(
        rx.heading(
            '早安啊'
        ),
        rx.text(
            '我是文字',
            # 透明度
            background_image = 'linear-gradient(135deg, orange 60%, cyan)',
            background_clip = 'text',
            font_weight = "bold",
            font_size = "2em",
        )
    )

sytel = {
    # ...
}

# ...

這時候會發現上面的heading會照著style的樣式進行處理，而底下的text則是依照底下寫的style來制定文字樣式。
子元件會覆蓋掉底下的style(global)。
如下圖。

Tailwind

reflex也支援 Tailwind CSS，不過要啟用它之前，要先更改一下rxcongig.py的參數

1
2
3
4
5
6
7
8
9
10
import reflex as rx

class MyreflexappConfig(rx.Config):
    pass

config = MyreflexappConfig(
    app_name="my_reflex_app",
    env = rx.Env.DEV,
    tailwind = {}
)

一樣支援tailwind配置選項，插件和預設自動包含在require()內部。

1
2
3
4
5
6
7
8
9
10
config = MyreflexappConfig(
    app_name="my_reflex_app",
    env = rx.Env.DEV,
    tailwind = {
        "theme": {
            "extend": {},
        },
        "plugins": ["@tailwindcss/typography"],
    },
)

停用tailwind css

可以使用

1
config = rx.Config(app_name = "app", tailwind = None)

特殊款式

支援所有 Chakra UI 的偽樣式，

1
2
3
4
5
6
7
8
9
10
11
def index():
    return rx.center(
        rx.box(
            rx.text(
                "Hover Me", 
                _hover = {
                    "color": "green"
                }
            ),
        )
    )

滑鼠滑過去就會顯示綠色。

內嵌也可以使用style

一個style可以共用，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
style = {
    'font_family': 'Comic Sans MS',
    'font_size': '16px',
    'color': 'green.500'
}


class SytleState(rx.State):
    pass


def index():
    return rx.center(
        rx.text('1', style = style),
        rx.text('500', style = style)
    )

這邊一樣依照style的方式去帶入text裡面轉換。
也可以使用多個字典組合起來…那就先拆分吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
style = {
    'font_family': 'Comic Sans MS',
    'font_size': '16px',
}

style1 = {
    'color': 'green.500'
}

# class 
# ...
def index():
    return rx.center(
        rx.text('1', style = style),
        rx.text('500', style = [style, style1])
    )

可以依照結果知道第二個text才會變色，再來要注意第二點，後面定義的樣式會覆蓋掉前面設定的樣式。

我這邊tailwind css 不知道為甚麼不能用，我就先拿官網的範例上來貼了，我找人問問看，如果我這邊有結果就再補上來…

找到問題了，這是reflex的bug，tailwind css 在0.2.8版本之後可用，如果你的reflex 是在0.2.8版本之前的，請使用

1
poetry remove reflex

接著

1
poetry add reflex

最後初始化一次

1
reflex init

運行

1
reflex run --loglevel debug

就可以看見上面的範例圖囉。