GTK4（C语言）中CSS样式无法生效的问题求助

问题场景 #

在Mac平台通过Homebrew安装GTK4，使用C语言结合GTK Builder构建GUI界面，尝试通过CSS将按钮设置为红色，但CSS样式未生效，按钮仍保持默认样式，所有文件位于同一目录。

原代码 #

C代码

#include <gtk/gtk.h>
#include <glib/gstdio.h>

static void print_hello(GtkWidget *widget, gpointer data) {
  g_print("Hello World\n");
}

static void quit_cb(GtkWindow *window) {
  gtk_window_close(window);
}

static void activate(GtkApplication *app, gpointer user_data) {
  GtkBuilder *builder = gtk_builder_new();
  gtk_builder_add_from_file(builder, "builder.ui", NULL);

  GObject *window = gtk_builder_get_object(builder, "window");
  gtk_window_set_application(GTK_WINDOW(window), app);

  GObject *button = gtk_builder_get_object(builder, "button1");
  g_signal_connect(button, "clicked", G_CALLBACK(print_hello), NULL);

  button = gtk_builder_get_object(builder, "button2");
  g_signal_connect(button, "clicked", G_CALLBACK(print_hello), NULL);

  GtkCssProvider *cssProvider = gtk_css_provider_new();
  gtk_css_provider_load_from_file (cssProvider, g_file_new_for_path ("style.css"));
  gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

  gtk_widget_set_visible(GTK_WIDGET(window), TRUE);
  
  g_object_unref(builder);
}

int main(int argc, char *argv[]) {
  #ifdef GTK_SRCDIR
    g_chdir(GTK_SRCDIR);
  #endif

  GtkApplication *app = gtk_application_new("org.gtk.example", G_APPLICATION_DEFAULT_FLAGS);
  g_signal_connect(app, "activate", G_CALLBACK(activate), NULL);

  int status = g_application_run(G_APPLICATION(app), argc, argv);
  g_object_unref(app);

  return status;
}

CSS代码

GtkButton {
  background-color: red;
}

UI代码

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <object id="window" class="GtkWindow">
    <property name="title">Grid</property>
    <child>
      <object id="grid" class="GtkGrid">
        <property name="hexpand">TRUE</property>
        <property name="vexpand">TRUE</property>
        <child>
          <object id="button1" class="GtkButton">
            <property name="label">Button 1</property>
            <property name="hexpand">TRUE</property>
            <property name="vexpand">TRUE</property>
            <layout>
              <property name="column">0</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
        <child>
          <object id="button2" class="GtkButton">
            <property name="label">Button 2</property>
            <property name="hexpand">TRUE</property>
            <property name="vexpand">TRUE</property>
            <layout>
              <property name="column">1</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

问题原因 #

1. GTK4 CSS选择器变更：GTK4不再使用类的类型名（如GtkButton）作为CSS选择器，而是改用小写的类名（如.button），原CSS选择器无法匹配按钮元素。
2. 默认主题样式优先级：按钮的默认主题样式包含背景渐变、边框、阴影等属性，普通的background-color无法覆盖这些复杂样式。

解决方法 #

1. 修改CSS文件 #

使用GTK4标准的CSS类名，并添加足够的样式属性覆盖默认主题：

.button {
  /* 覆盖完整背景属性，替代单一的background-color */
  background: red;
  /* 去掉默认边框 */
  border: none;
  /* 去掉默认阴影 */
  box-shadow: none;
}

如果仅需要指定特定按钮生效，可以使用UI文件中定义的ID选择器：

#button1, #button2 {
  background: red;
  border: none;
  box-shadow: none;
}

2. 添加CSS加载错误检查（可选） #

在C代码中添加错误检查，快速定位CSS文件是否正确加载：
修改C代码中加载CSS的部分：

GtkCssProvider *cssProvider = gtk_css_provider_new();
GError *error = NULL;
gtk_css_provider_load_from_file(cssProvider, g_file_new_for_path("style.css"), &error);
if (error != NULL) {
  g_printerr("加载CSS文件失败: %s\n", error->message);
  g_error_free(error);
}
gtk_style_context_add_provider_for_display(gdk_display_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

3. 验证样式优先级（可选） #

如果主题样式仍然覆盖自定义样式，可以临时使用!important提升优先级（不推荐在生产代码中使用，建议优先调整选择器特异性）：

.button {
  background: red !important;
  border: none !important;
  box-shadow: none !important;
}

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