diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index a40620a13..c32446559 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -6,6 +6,7 @@ import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
 import { i18n } from "../i18n"
+import { classNames } from "../util/lang"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
@@ -88,7 +89,7 @@ export default ((userOpts?: Partial<Options>) => {
     }
     return (
       <div class="explorer-container">
-        <div class={`explorer ${displayClass ?? ""}`}>
+        <div class={classNames(displayClass, "explorer")}>
           <button
             type="button"
             id="mobile-explorer"
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index cff28cbb9..8fbe5879b 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -2,6 +2,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 import { i18n } from "../i18n"
+import { classNames } from "../util/lang"
 
 interface Options {
   links: Record<string, string>
@@ -12,7 +13,7 @@ export default ((opts?: Options) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
-      <footer class={`${displayClass ?? ""}`}>
+      <footer class={classNames(displayClass)}>
         <p>
           {i18n(cfg.locale).components.footer.createdWith}{" "}
           <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}