Dojo 中的样式和主题

示例

以下是部件的 CSS 模块文件：

src/styles/MyWidget.m.css

.myWidgetClass {
    font-variant: small-caps;
}

.myWidgetExtraClass {
    font-style: italic;
}

在对应的部件中使用此样式，如下所示：

src/widgets/MyWidget.ts

import { create, tsx } from '@dojo/framework/core/vdom';

import * as css from '../styles/MyWidget.m.css';

const factory = create();

export default factory(function MyWidget() {
    return <div classes={[css.myWidgetClass, css.myWidgetExtraClass]}>Hello from a Dojo widget!</div>;
});

在构建的应用程序中查看示例部件中的 CSS 类时，它们不会直接包含 myWidgetClass 和 myWidgetExtraClass，而是经过混淆处理的 CSS 类名，类似于 MyWidget-m__myWidgetClass__33zN8 和 MyWidget-m__myWidgetExtraClass___g3St。

混淆后的类名专用于 MyWidget 元素，而这是由 Dojo 的 CSS 模块化构建流程决定的。有了这种机制，则同一个应用程序的其他部件也可以使用 myWidgetClass 类名，即使具有不同的样式规则，也不会在每组样式间出现任何冲突。

警告： 混淆处理的 CSS 类名是不稳定的，可能会随着应用程序的构建而更改，所以开发人员不能显式地引用它们（例如试图在应用程序的其他位置定位一个元素）。

CSS 自定义属性

Dojo 可以使用现代的 CSS 特性，例如自定义属性和 var()，来提取和集中管理应用程序中的通用样式属性。

不必在每个部件的 CSS 模块中为颜色或字体设置相同的值，而是通过提取自定义属性，在每个 CSS 模块中引用该属性名，然后在集中一处的 .root 样式类设置主题的 variant。这种隔离更易于维护跨整个应用程序的公共样式，并可以通过更改变量创建主题的变体。

注意：不要在部件的 CSS 模块中导入主题变体文件；这是在运行时通过 theme.variant() 类处理的。

例如：

src/themes/MyTheme/variants/default.m.css

.root {
    --dark-background: black;
    --dark-foreground: lightgray;

    --padding: 32px;
}

src/themes/MyTheme/MyWidget.m.css

.root {
    margin: var(--padding);

    color: var(--dark-foreground);
    background: var(--dark-background);
}

Dojo 默认的构建流程按原样将自定义属性输出到应用程序的样式表中。对于最新的浏览器来说，这样做没有问题；但当使用的浏览器没有实现 CSS 自定义属性标准（如 IE）时，就会出现问题。为了解决这个问题，可以使用遗留模式（dojo build app --legacy）来构建应用程序，这种情况下，Dojo 会在构建期间解析自定义属性的值，并复制到输出的样式表中。一个值将包含原来的 var() 引用，第二个值是专为旧版浏览器解析的值，当无法处理 var() 时就使用解析后的值。

CSS 模块的组合功能

将主题应用到 Dojo 部件后，部件的默认样式类会完全被主题提供的样式类覆盖。当只需要通过主题修改样式类中的一部分属性，而其余属性依然使用默认值时，就会出现问题。

Dojo 应用程序中的 CSS 模块文件可以使用 composes: 功能将样式从一个类选择器应用到另一个类选择器。当通过调整现有的主题来创建一个新主题时，或者在单个主题中提取通用的样式属性时（注意，提取单个属性的值是更标准的做法是 CSS 自定义属性），这个功能是很有用的。

警告： composes: 功能可能会比较脆弱，例如当扩展一个不受当前应用程序控制的第三方主题时。第三方主题所做的任何更改，都可能会破坏基于 composes 功能的应用程序主题，且这样的破坏很难定位和解决。

但是，在大型应用程序中仔细使用此功能会很有用。比如，集中管理一组公共属性：

src/themes/common/ButtonBase.m.css

.buttonBase {
    margin-right: 10px;
    display: inline-block;
    font-size: 14px;
    text-align: left;
    background-color: white;
}

src/themes/myBlueTheme/MyButton.m.css

.root {
    composes: buttonBase from '../common/ButtonBase.m.css';
    background-color: blue;
}