将 Joy UI 暗模式转换并导入 ClojureScript

Question

我正在尝试在我的 cljs 项目中使用 Joy UI 及其深色模式

https://mui.com/joy-ui/customization/dark-mode/

，并且坚持将下面的部分翻译成 cljs 代码。

import * as React from 'react';
import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import Sheet from '@mui/joy/Sheet';
import Chip from '@mui/joy/Chip';
import Typography from '@mui/joy/Typography';

const theme = extendTheme({ cssVarPrefix: 'demo' });

export default function DarkModeByDefault() {
  return (
    <CssVarsProvider
      defaultMode="dark"
      // the props below are specific to this demo,
      // you might not need them in your app.
      //
      theme={theme}
      // the selector to apply CSS theme variables stylesheet.
      colorSchemeSelector="#demo_dark-mode-by-default"
      //
      // the local storage key to use
      modeStorageKey="demo_dark-mode-by-default"
      //
      // set as root provider
      disableNestedContext
    >
      <div id="demo_dark-mode-by-default">
        <Sheet sx={{ px: 3, py: 1.5, borderRadius: 'sm' }}>
          <Typography
            component="div"
            endDecorator={
              <Chip variant="outlined" color="primary" size="sm">
                Default
              </Chip>
            }
            fontSize="lg"
          >
            Dark mode
          </Typography>
        </Sheet>
      </div>
    </CssVarsProvider>
  );
}

我用的是

shadow-cljs

，我试着翻译成下面这样

(ns ....
  (:require
    ...
   ["@mui/joy/Button" :as mui-joy-button]
   ["@mui/joy/Grid" :as mui-joy-grid]
   ["@mui/joy/styles" :as mui-joy-styles]))

(def btn (rc/adapt-react-class (.-default mui-joy-button)))
(def grd (rc/adapt-react-class (.-default mui-joy-grid)))
(def cvp (rc/adapt-react-class mui-joy-styles/CssVarsProvider))
(def ext mui-joy-styles/extendTheme)

(def theme (ext {:cssVarPrefix "demo"}))

(defn main-page []
  [cvp {:defaultMode "dark"
        :theme theme
        :colorSchemeSelector "#demo_dark-mode-by-default"
        :modeStorageKey "demo_dark-mode-by-default"
        :disableNestedContext true}]
  [:div {:id "demo_dark-mode-by-default"}
   [grd {:container true :spacing 2}
    [grd {:xs 8} [:p "asdasdfasdf"]]
    [grd {:xs 4} [btn {:variant :solid} "asdf"]]]])

但是主题和黑暗模式不起作用。我相信我的问题是 CssVarsProvider 部分。我不确定如何导入它。

有人可以提供线索吗？

Answer 1

(def theme ...)

使用 CLJS Map 调用

(ext ...)

JS 函数。它不支持它，它可能需要是

(def theme (ext #js {:cssVarPrefix "demo"}))

或

(def theme (clj->js {:cssVarPrefix "demo"}))

，以便首先将其转换为适当的 JS 对象。您使用哪一个取决于您是否添加嵌套结构。

#js

仅适用于简单的对象，在这种情况下适合。

您还可以通过使用

:>

运算符和 require 糖来稍微缩小代码，这样您就不需要所有额外的 defs。

(ns ...
  (:require
    ...
    ["@mui/joy/Button$default" :as btn]
    ["@mui/joy/Grid$default" :as grd]
    ["@mui/joy/styles" :as mui-joy-styles :refer (CssVarsProvider extendTheme)]))

(def theme (extendTheme #js {:cssVarPrefix "demo"}))

(defn main-page []
  [:> CssVarsProvider
   {:defaultMode "dark"
    :theme theme
    :colorSchemeSelector "#demo_dark-mode-by-default"
    :modeStorageKey "demo_dark-mode-by-default"
    :disableNestedContext true}
   [:div {:id "demo_dark-mode-by-default"}
    [:> grd {:container true :spacing 2}
     [:> grd {:xs 8}
      [:p "asdasdfasdf"]]
     [:> grd {:xs 4}
      [:> btn {:variant "solid"} "asdf"]]]]])

Answer 2

在 Clojure 中，只返回函数中的最后一个表达式。在

main-page

中，您有两个组件（

cvp

和

:div

），但只返回最后一个（

:div

）。

要返回这两个组件，您可以将这两个组件包装在一个 div 中，或者，当使用 Reagent 时，一个带有

:<>

:

的 React 片段

(defn main-page []
 [:div ;; or :<> to render both components without a div (in Reagent)
  [cvp {:defaultMode "dark"
        :theme theme
        :colorSchemeSelector "#demo_dark-mode-by-default"
        :modeStorageKey "demo_dark-mode-by-default"
        :disableNestedContext true}]
  [:div#demo_dark-mode-by-default
   [grd {:container true :spacing 2}
    [grd {:xs 8} [:p "asdasdfasdf"]]
    [grd {:xs 4} [btn {:variant :solid} "asdf"]]]]])

请注意，在 Hiccup 中，类可以附加到带有

.

的向量中的第一个关键字和带有

#

的 id，所以我将

[:div {:id "demo_dark-mode-by-default"

} 更改为等效的

:div#demo_dark-mode-by-default

.