使用MIMCSS CSS-IN-JS庫定義和應用UI主題-css教學-PHP中文網

使用MIMCSS CSS-IN-JS庫定義和應用UI主題

UI主題動態改變了網站的視覺樣式，以黑暗模式之類的功能為例。用戶通過UI控件切換主題或利用OS級顏色首選項。對於開發人員，有效的主題工具應簡化主題定義和運行時應用程序。本文探討了MIMCSS，CSS-IN-JS庫以及其使用類繼承的獨特主題方法。

全面披露：我是MIMCSS作者。儘管這似乎是自我促進的，但我相信MIMCSS的主題方法是創新的，值得關注。

主題策略

Web UI樣式將HTML元素鏈接到CSS實體（類，ID）。修改視覺表示涉及：

更改HTML元素CSS選擇器（類名稱，ID）。
在保留選擇器時為元素修改CSS樣式。

主題定義通常涉及的樣式實體少於引用它們的HTML元素，尤其是使用複雜的小部件。因此，更改主題樣式通常比修改許多HTML元素類屬性更有效。

CSS主題

傳統CSS使用替代樣式表：

<link href="default.css" rel="stylesheet" title="默認樣式" type="text/css">
<link href="fancy.css" rel="alternate stylesheet" title="想要" type="text/css">
<link href="basic.css" rel="alternate stylesheet" title="基本的" type="text/css">

登入後複製

只有一個樣式表活動；瀏覽器為主題選擇提供UI。跨樣式表的相同規則名稱（類名）至關重要：

 / * default.css */
.Element {color：#fff; }

/ * basic.css */
.Element {顏色：＃333; }

登入後複製

切換樣式表不需要HTML更改；瀏覽器根據級聯順序重新計算樣式。但是，瀏覽器對備用樣式表的支持是有限的。

CSS In-JS主題

許多CSS IN-JS庫的處理方式不同。反應集成的庫（例如樣式的組件）經常使用ThemeProvider和上下文API或withTheme高階組件，從而觸發主題更改的重新渲染。如果支持主題，則使用專有方法，採用專有方法。許多人優先考慮CSS範圍，創建唯一的類名稱；主題更改需要HTML修改。

MIMCSS：另一種方法

MIMCSS結合了替代樣式和CSS-In-JS的優勢。它以多種樣式變體和相同命名的CSS實體反映了替代樣式方法。它還提供面向對象的編程和打字稿類型的安全性以及CSS-IN-JS的動態功能。

MIMCSS基本面

MIMCSS使用打字稿類來表示樣式表。規則定義為類屬性：

從“ MIMCSS”中導入 *作為CSS；

類Mystyles擴展了CSS.StyleDefinition {
  顯著= this。$ class（{color：“橙色”，fontstyle：“ italic”}）;
  critical = this。$ id（{color：“ red”，fontueight：700}）;
}

登入後複製

MIMCSS語法與CSS非常相似，儘管更詳細。它支持各種CSS規則（類，ID，標籤，密鑰幀等）。定義樣式定義類後，將其激活：

令styles = css.activate（mystyles）;

登入後複製

這將在DOM中生成CSS規則。 HTML中的參考樣式：

使成為（） {
  返回 （
    <div>
      <p classname="{styles.significant.name}">重要的</p>
      <p id="{styles.critical.name}">批判的</p>
    </div>
  ）；
}

登入後複製

不再需要時停用樣式：

 CSS.Deactivate（樣式）;

登入後複製

MIMCSS生成唯一的類和ID名稱（例如，開發中的MyStyles_significant ， n2生產中）。

樣式定義繼承

繼承簡化了主題：

類基礎擴展了CSS.StyleDefinition {pad = this。$ class（{padding：4}）; }
類得出的類擴展基礎{pad = this。$ class（{padding：8}）; }
令派生= css.activate（派生）;

登入後複製

derived.pad.name產生Base_pad ，但樣式為{ padding: 8px } 。該名稱是繼承的，但風格被覆蓋了。多個派生類重複使用相同名稱，但應用了不同的樣式。

MIMCSS主題

MIMCS主題使用定義CSS規則的主題聲明類，以及繼承和覆蓋這些規則的多個實現類。這反映了替代樣式方法的方法。

示例：主題定義邊框形狀：

 class bordertheme擴展了css.themedefinition {bordershape =this。$ class（）; }

類SquareBorderTheme擴展BorderTheme {
  bordershape = this。$ class（{border：[“ thin”，“ solid”，“ green”]，borexinlineStartWidth：“厚”}）;
}

class roundbordertheme擴展bordertheme {
  bordershape = this。$ class（{border：[“ edimed”，“ solid”，“ blue”]，borderradius：8}）;
}

登入後複製

激活主題：

讓主題：borderTheme = css.activate（squareBorderTheme）;

登入後複製

一次來自給定聲明類的主題一次可以活躍。

引用MIMCSS主題

主題通常定義可重複使用的元素（顏色，大小，字體）。 CSS自定義屬性是理想的：

 colortheme類擴展CSS.ThemedeFinition {
  bgcolor =this。$ var（“ color”）;
  frcolor = this。$ var（“ color”）;
}

類LightTheme擴展ColorTheme {
  bgcolor =this。$ var（“ color”，“ white”）;
  frcolor =this。$ var（“顏色”，“黑色”）;
}

類Darktheme擴展ColorTheme {
  bgcolor =this。$ var（“ color”，“ black”）;
  frcolor =this。$ var（“顏色”，“白色”）;
}

登入後複製

樣式定義中的參考主題屬性：

類Mystyles擴展了CSS.StyleDefinition {
  主題= this。$ use（colortheme）;
  容器=this。$ class（{color：this.theme.frcolor，backgroundColor：this.theme.bgcolor}）;
}

登入後複製

這將使用自定義屬性（ var(--bgColor) ）生成CSS。組件與特定主題實現分離，允許外部主題提供。 MIMCS還允許自定義屬性的內部名稱生成覆蓋現有系統（例如材料設計）。

一頁上的多個主題

每個聲明類別只能同時進行主題實現。但是，要並排顯示多個主題，請利用基於CSS規則的自定義屬性重新定義：

類Mystyles擴展了CSS.StyleDefinition {
  主題= this。$ use（colortheme）;
  block =this。$ class（{backgroundColor：this.theme.bgcolor，color：this.theme.frcolor}）;
  top = this。$ class（{“”：this.block，“  - ”：[lighttheme]}）;
  底部=this。$ class（{“”：this.block，“  - ”：[darktheme]}）;
}

登入後複製

這操作員結合了類名， --基於指定主題重新定義自定義屬性。