如何为TemplateChild<gtk::Label>设置灰色样式？CSS不生效问题

我想给代码里的TemplateChild<gtk::Label>（具体是next_otp_label）设置灰色样式，已经在style.css里用ID选择器#next_otp_label写了color: gray;，但完全没效果。下面是相关的Rust代码、UI定义文件和CSS代码，求解决办法。

Rust代码 #

#[derive(Default, gtk::CompositeTemplate, glib::Properties)]
#[properties(wrapper_type = super::AccountRow)]
#[template(resource = "/com/belmoussaoui/Authenticator/account_row.ui")]
pub struct AccountRow {
    #[property(get, set, construct_only)]
    pub account: OnceCell<Account>,
    #[template_child]
    pub increment_btn: TemplateChild<gtk::Button>,
    #[template_child]
    pub otp_label: TemplateChild<gtk::Label>,
    #[template_child]
    pub next_otp_label: TemplateChild<gtk::Label>,
}

UI定义文件（account_row.ui） #

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template parent="AdwActionRow" class="AccountRow">
    <property name="activatable">True</property>
    <property name="selectable">False</property>
    <property name="use-markup">False</property>
    <child type="suffix">
      <object class="GtkLabel" id="otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkLabel" id="next_otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton" id="increment_btn">
        <property name="visible">False</property>
        <property name="valign">center</property>
        <property name="action-name">account.increment-counter</property>
        <property name="icon-name">refresh-symbolic</property>
        <property name="tooltip-text" translatable="yes">Increment the counter</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton">
        <property name="valign">center</property>
        <property name="action-name">account.copy-otp</property>
        <property name="icon-name">copy-symbolic</property>
        <property name="tooltip-text" translatable="yes">Copy PIN to clipboard</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkImage">
        <property name="icon_name">go-next-symbolic</property>
        <property name="tooltip-text" translatable="yes">Account details</property>
      </object>
    </child>
  </template>
</interface>

尝试的CSS代码 #

#next_otp_label {
  color: gray;
}

解决方向 #

• 提升CSS选择器优先级：默认主题样式可能权重更高，试试更具体的选择器：

  AccountRow #next_otp_label {
    color: gray;
  }
  

  或者结合类名：

  .numeric#next_otp_label {
    color: gray;
  }
  

  尽量避免用!important，优先通过选择器 specificity 来提升权重。

• 确认CSS文件加载状态：检查应用是否正确加载了CSS资源，可在Rust代码中添加加载逻辑：

  let provider = gtk::CssProvider::new();
  provider.load_from_resource("/com/belmoussaoui/Authenticator/style.css");
  gtk::StyleContext::add_provider_for_display(
      &gtk::gdk::Display::default().unwrap(),
      &provider,
      gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
  );
  

  注意资源路径要和实际文件位置对应。

• 临时内联样式测试：在UI文件中给next_otp_label添加内联样式，验证是否能生效：

  <object class="GtkLabel" id="next_otp_label">
    <!-- 原有属性 -->
    <style>
      <class name="numeric" />
      <property name="color">gray</property>
    </style>
  </object>
  

  如果内联样式生效，说明是CSS优先级或加载问题。

• 用GTK Inspector调试：按下Ctrl+Shift+I打开GTK Inspector，定位到next_otp_label元素，查看样式面板，确认你的CSS规则是否被加载、是否被其他样式覆盖。

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