Reagent项目中使用CSS自定义属性的正确方式

在Reagent项目中，开发者经常需要通过Hiccup语法来描述HTML元素及其样式。然而，官方文档中关于如何传递CSS自定义属性（CSS Variables）的部分存在缺失，这给开发者带来了困惑。

CSS自定义属性的基本概念

CSS自定义属性是现代CSS中非常实用的功能，它允许开发者定义可重用的CSS变量。这些变量以--开头，可以在整个样式表中引用和使用。例如：

:root {
  --main-color: #06c;
}
.element {
  color: var(--main-color);
}

在Reagent中传递CSS自定义属性

在Reagent的Hiccup语法中，传递CSS自定义属性需要特殊的处理方式。与常规的CSS属性不同，自定义属性需要使用特定的语法格式：

[:div {:style {"--custom-property" "value"}} "内容"]

注意以下几点关键细节：

1. 属性名必须用双引号包裹
2. 属性值可以是任何有效的CSS值
3. 整个style属性是一个Clojure map

实际应用示例

下面是一个完整的示例，展示了如何在Reagent组件中使用CSS自定义属性：

(defn themed-button []
  (let [theme-color "#4CAF50"]
    [:div {:style {"--primary-color" theme-color}}
     [:button {:style {:background "var(--primary-color)"
                       :color "white"
                       :padding "10px 20px"
                       :border "none"
                       :border-radius "4px"}}
      "主题按钮"]]))

动态更新自定义属性

Reagent的强大之处在于可以响应式地更新UI。CSS自定义属性也可以动态更新：

(defn dynamic-theme []
  (let [color (r/atom "#FF5722")]
    (fn []
      [:div
       [:div {:style {"--dynamic-color" @color}}
        [:p {:style {:color "var(--dynamic-color)"}} 
         "这段文字会随着颜色变化"]]
       [:button {:on-click #(reset! color "#3F51B5")}
        "改变主题色"]])))

注意事项

1. 浏览器兼容性：虽然现代浏览器都支持CSS自定义属性，但在旧版浏览器中可能需要备用方案
2. 命名规范：建议使用有意义的命名，遵循--component-name-property的格式
3. 作用域：自定义属性具有继承性，要注意它们的作用范围

通过正确使用CSS自定义属性，开发者可以在Reagent应用中创建更加灵活和可维护的样式系统，实现主题切换、动态样式调整等高级功能。