使用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]}）;
}

登录后复制

这操作员结合了类名， --基于指定主题重新定义自定义属性。