CODEWITHSUNDEEP
sap-commerce-cloudspartacus-storefront
Lenart Golob
Lenart Golob

Reputation: 191

Add custom CSS classes to components - Spartacus

I created a Rotating Images Component with smartedit and now i want to customize the style of that component. There is a field in smartedit style classes, but even though I added a class and in styles.scss added styles for that class I doesn't work. So i am wondering how can I change styling on a specific component, without changing the styling of all Rotating Images Components.

Upvotes: 0

Views: 1208

Answers (1)

i042416
i042416

Reputation: 366

I will use a concrete example to illustrate how to customize component appearance via css manipulation.

Suppose I would like to change the behavior of "ORDER SUMMARY" in cart view:

enter image description here

find its selector in Chrome dev tools：

cx-order-summary h4

enter image description here

use the following line in file styles.scss, to overwrite the default setting provided by Spartacus styles library:

enter image description here

the final result:

enter image description here

Another example，suppose I need to make font color to be green and font bold:

enter image description here

In order to reduce the workload and avoid repeatedly applying the same CSS settings to the selectors corresponding to the Order Summary and Coupon areas, we can define the repeated CSS settings in %jerry-custom-div (similar to the programming language Macro), and then use @extend in cx-order-summary and cx-cart-coupon to directly reference this common definition.

I use the following code in styles.scss:

enter image description here

final result:

enter image description here

Upvotes: 1

Related Questions