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，而是包含类似于 MyWidget-m__myWidgetClass__33zN8 和 MyWidget-m__myWidgetExtraClass___g3St 的混淆 CSS 类名。

这些混淆的类名被本地化为 MyWidget 元素，并且由 Dojo 的 CSS 模块构建过程确定。通过这种机制，应用程序中的其他小部件也可以使用 myWidgetClass 类名，但具有不同的样式规则，并且不会遇到任何样式集之间的冲突。

警告：混淆的 CSS 类名应被视为不可靠，并且可能会随着应用程序的新构建而改变，因此开发人员不应显式引用它们（例如，如果尝试从应用程序中的其他地方定位元素）。

CSS 自定义属性

Dojo 允许使用现代 CSS 功能，例如 自定义属性和 var()，以帮助抽象和集中应用程序中的常见样式属性。

与其在每个小部件的 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;
}