购物车和结账模块的主题定制

[!IMPORTANT] 我们强烈建议不要基于现有的模块类名编写 CSS 代码，并且尽可能使用全局样式。 我们尤其不建议编写依赖于特定模块是另一个模块的子元素的 CSS 选择器，因为用户可以自由移动模块，因此很容易导致代码失效。 类似于 WordPress 本身，我们认为组件、模块和模块模板中的 HTML 结构是“私有”的，并且可能会在未来进一步更改，因此使用 CSS 针对模块或模块模板的内部结构_不建议也不支持_。

按钮

WC Blocks 引入了按钮组件，它与普通的 button 元素不同，因为它具有一些默认样式，使其能够很好地融入 Blocks 的设计。

主题仍然可以对它们进行样式设置，以匹配主题颜色或样式，如下所示：

.wc-block-components-button {
	background-color: #d5502f;
	color: #fff;
	/* 可以添加更多规则来修改边框、阴影等 */
}
/* 可能需要修改悬停、聚焦、激活和禁用状态 */

请注意，按钮组件没有 .button 类名。 因此，那些为按钮编写了一些样式的，可能需要将这些样式应用到按钮组件上。

移动设备上的提交容器

在小屏幕视口中，购物车模块在屏幕底部的固定容器内显示 继续结账 按钮。

默认情况下，该容器具有白色背景，因此与按钮组件的默认颜色相得益彰。 如果主题希望应用与页面其他部分相同的背景颜色，可以使用以下代码片段：

.wc-block-cart__submit-container {
	background-color: #f9f4ee;
}

请注意，该容器具有顶部的盒子阴影，这可能与某些深色背景颜色不协调。 如果需要，可以直接修改 color 属性（内部，阴影颜色使用 currentColor，因此它会尊重 color 属性）：

.wc-block-cart__submit-container::before {
	color: rgba( 214, 209, 203, 0.5 );
}

或者，主题可以完全覆盖 box-shadow 属性：

.wc-block-cart__submit-container::before {
	box-shadow: 0 -10px 20px 10px rgba( 214, 209, 203, 0.5 );
}

商品数量标识

商品数量标识是位于 结账 块侧边栏的 订单摘要 部分中，显示在图像旁边的数值。

默认情况下，它使用黑色和白色边框和阴影，以确保其与浅色和深色背景的主题具有足够的对比度。 主题可以使用单个 CSS 选择器和四个属性来修改颜色，从而使用自己的调色板。 例如：

.wc-block-components-order-summary-item__quantity {
	background-color: #f9f4ee;
	border-color: #4b3918;
	box-shadow: 0 0 0 2px #f9f4ee;
	color: #4b3918;
}