如何为NiceGUI提供全局CSS样式表？

当然可以给NiceGUI配置全局CSS，不用每个元素重复写.style()，下面是几种实用方法：

1. 注入全局CSS到页面头部 #

用ui.add_head_html()直接把自定义CSS样式表插入到页面的<head>里，既能全局覆盖底层元素样式，也能定义自定义类供元素调用：

from nicegui import ui

# 插入全局CSS
ui.add_head_html('''
<style>
/* 全局覆盖所有NiceGUI标签组件的样式 */
.nicegui-label {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* 自定义CSS类，给需要的元素调用 */
.custom-btn {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
}

/* 覆盖所有按钮的默认样式 */
.nicegui-button {
    border-radius: 4px;
}
</style>
''')

# 直接使用全局样式的标签
ui.label('这是自动应用全局样式的标签')
# 给按钮添加自定义类
ui.button('带自定义样式的按钮').classes('custom-btn')
# 普通按钮会自动应用全局覆盖的按钮样式
ui.button('普通按钮')

ui.run()

NiceGUI的底层元素都自带以nicegui-开头的类名，比如标签是.nicegui-label，按钮是.nicegui-button，直接针对这些类写CSS就能全局修改对应组件的样式。

2. 封装自定义组件复用样式 #

如果不想写全局CSS，也可以把常用样式封装成自定义组件，避免重复写.style()：

from nicegui import ui

# 封装带默认样式的标签组件
def styled_label(text):
    return ui.label(text).style('color: #2c3e50; font-size: 16px;')

# 使用自定义组件
styled_label('第一个复用样式的标签')
styled_label('第二个复用样式的标签')

ui.run()

这种方式适合只需要给特定组件统一样式的场景，比全局CSS更聚焦。

内容的提问来源于stack exchange，提问作者rolo