hybris - 向组件添加自定义 CSS 类 - Spartacus

Question

我使用 smartedit 创建了一个旋转图像组件，现在我想自定义该组件的样式。smartedit 样式类中有一个字段，但即使我添加了一个类并styles.scss为该类添加了样式，我也不起作用。所以我想知道如何在不更改所有旋转图像组件的样式的情况下更改特定组件的样式。

标签： hybrisspartacus-storefront

Answer 1

我将使用一个具体的示例来说明如何通过 css 操作自定义组件外观。

假设我想更改购物车视图中“订单摘要”的行为：

在 Chrome 开发工具中找到它的选择器：</p>

cx 订单摘要 h4

使用文件 styles.scss 中的以下行来覆盖 Spartacus 样式库提供的默认设置：

最终结果：

另一个例子，假设我需要将字体颜色设置为绿色和粗体：

为了减少工作量，避免对 Order Summary 和 Coupon 区域对应的选择器重复应用相同的 CSS 设置，我们可以在 %jerry-custom-div 中定义重复的 CSS 设置（类似于编程语言宏），并且然后在 cx-order-summary 和 cx-cart-coupon 中使用 @extend 来直接引用这个通用定义。

我在 styles.scss 中使用以下代码：

最后结果：