使用 CSS for Shiny for Python 和 ui.tags.style

Question

我想为 Python 输入字段设置 Shiny 的 CSS 样式，但不知何故它不起作用。不过我可以设置卡片标题的样式。有谁知道我做错了什么？或者 ui.input* 元素不能直接设置样式吗？

from shiny import App, render, ui, reactive
from pathlib import Path


app_ui = ui.page_fillable(
    ui.panel_title(
        ui.row(
        ui.column(12, ui.h1("title1")),
        )
    ),
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_text("input_text1", "input_text1", value=""),
            ui.input_selectize("input_selectize1", "input_selectize1", choices=["1", "2"]),
            ui.input_numeric("input_numeric1", "input_numeric1", value=4),
            ui.input_switch("input_switch1", "input_switch1", value=False),
            ui.input_action_button("input_action_button1", "input_action_button1"),
            width="350px"
        ),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1"),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    ),
    ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    ".input-text { color:red; height:0px; }",
    ".input-numeric { color:red; height:0px; }")
)


def server(input, output, session):

    @reactive.event(input.input_action_button1)
    def reactive_function1():
        pass

    @output
    @render.data_frame
    def card1():
        return reactive_function1()

src_dir = Path(__file__).parent / "src"
app = App(app_ui, server, static_assets=src_dir)

Answer 1

您可以按类型定位

input

，例如

input[type = 'text']

代表

ui.input_text()

（另请参阅

<input>

：MDN 文档中的 HTML 输入元素）。然而，

ui.input_selectize()

的工作方式有点不同，这里您可以使用

.selectize-input

。

一个例子是这样的：

from shiny import App, render, ui, reactive
from pathlib import Path

app_ui = ui.page_fillable(
    ui.panel_title(
        ui.row(
        ui.column(12, ui.h1("title1")),
        )
    ),
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_text("input_text1", "input_text1", value=""),
            ui.input_selectize("input_selectize1", "input_selectize1", choices=["1", "2"]),
            ui.input_numeric("input_numeric1", "input_numeric1", value=4),
            ui.input_switch("input_switch1", "input_switch1", value=False),
            ui.input_action_button("input_action_button1", "input_action_button1"),
            width="350px"
        ),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1"),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    ),
    ui.tags.style(
    ".card-header { color:white; background:#2A2A2A !important; }",
    "input[type = 'text'] { background-color:red; height:0px; }",
    "input[type = 'number'] { background-color:green; }",
    ".selectize-input { background-color:yellow !important; height:0px; }")
)


def server(input, output, session):

    @reactive.event(input.input_action_button1)
    def reactive_function1():
        pass

    @output
    @render.data_frame
    def card1():
        return reactive_function1()

src_dir = Path(__file__).parent / "src"
app = App(app_ui, server, static_assets=src_dir)