react/components/InstallmentProduct/InstallmentProduct.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useProduct } from "vtex.product-context";
+import styles from "./InstallmentProduct.module.css";
 
 const InstallmentProduct = () => {
   const product = useProduct();
@@ -12,16 +13,14 @@ const InstallmentProduct = () => {
       product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value,
   };
   return (
-    <p className="vtex-flex-layout-0-x-PriceContent">
-      <strong>
-        {productWithInstallments.numberOfInstallments}x&nbsp;
-      </strong>
+    <p className={styles.PriceContent}>
+      <strong>{productWithInstallments.numberOfInstallments}x&nbsp;</strong>
       de&nbsp;
       <strong>
         R$&nbsp;
         {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
-      </strong> sem juros
-     
+      </strong>{" "}
+      sem juros
     </p>
   );
 };

styles/css/vtex.flex-layout.css

@@ -32,14 +32,3 @@
     grid-template-columns: 48.819% 48.819%;
   }
 }
-
-.flexColChild .PriceContent {
-  margin: 0;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-}
-.flexColChild .PriceContent :nth-child(1n) {
-  font-weight: 700;
-}

styles/sass/pages/product/flex-layout/vtex.flex-layout.scss

@@ -23,18 +23,3 @@
     grid-template-columns: 48.819% 48.819%;
   }
 }
-
-// dados produto
-
-.flexColChild {
-  .PriceContent {
-    margin: 0;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: #929292;
-    & :nth-child(1n) {
-      font-weight: 700;
-    }
-  }
-}