添加自定义 CSS 类 到组件 - 斯巴达克斯
Add custom CSS classes to components - Spartacus
我用 smartedit 创建了一个旋转图像组件，现在我想自定义该组件的样式。 smartedit 样式 classes 中有一个字段，但即使我添加了 class 并在 styles.scss 中添加了 class 的样式，我也不起作用。所以我想知道如何在不更改所有旋转图像组件的样式的情况下更改特定组件的样式。
我将用一个具体的例子来说明如何通过css操作自定义组件外观。
假设我想更改购物车视图中“订单摘要”的行为：
在Chrome开发工具中找到它的选择器：
cx-order-summary h4
使用文件 styles.scss 中的以下行来覆盖 Spartacus 样式库提供的默认设置：
最终结果：
另一个例子，假设我需要将字体颜色设置为绿色和粗体：
为了减少工作量，避免对Order Summary和Coupon区域对应的选择器重复应用相同的CSS设置，我们可以在%jerry-中定义重复的CSS设置custom-div（类似于编程语言Macro），然后在cx-order-summary和cx-cart-coupon中使用@extend直接引用这个通用定义
我在styles.scss中使用了以下代码：
最终结果：
我用 smartedit 创建了一个旋转图像组件，现在我想自定义该组件的样式。 smartedit 样式 classes 中有一个字段，但即使我添加了 class 并在 styles.scss 中添加了 class 的样式，我也不起作用。所以我想知道如何在不更改所有旋转图像组件的样式的情况下更改特定组件的样式。
我将用一个具体的例子来说明如何通过css操作自定义组件外观。
假设我想更改购物车视图中“订单摘要”的行为：
在Chrome开发工具中找到它的选择器：
cx-order-summary h4
使用文件 styles.scss 中的以下行来覆盖 Spartacus 样式库提供的默认设置：
最终结果：
另一个例子，假设我需要将字体颜色设置为绿色和粗体：
为了减少工作量，避免对Order Summary和Coupon区域对应的选择器重复应用相同的CSS设置，我们可以在%jerry-中定义重复的CSS设置custom-div（类似于编程语言Macro），然后在cx-order-summary和cx-cart-coupon中使用@extend直接引用这个通用定义
我在styles.scss中使用了以下代码：
最终结果：