Here is the code snippet from my Sublayout.module.scss file:
.pl-6 {
padding-left: 6rem !important;
}
.pr-6 {
padding-right: 6rem !important;
}
.pl-12 {
padding-left: 12rem !important;
}
.pr-12 {
padding-right: 12rem !important;
}
After importing styles from Sublayout.module.css, I encountered an issue where the classNames were not being applied and showing as undefined. Here's how I tried to implement it in my component:
import { FC, ReactNode } from "react";
import { Grid } from "@payping/web-components";
import styles from "./Sublayout.module.scss";
interface Props {
children?: ReactNode;
className?: string;
}
export const SubLayout: FC<Props> = (props: Props) => {
const { children, className } = props;
const sizes = Grid.useBreakpoint();
// Handling different screen sizes
if (sizes.xxl) {
console.log("xxl screen");
return <div className={`${styles.pr12} ${styles.pl12} w-100 ${className}`}>{children}</div>;
}
// More condition checks for other screen sizes...
return <div className={`ps-6 pe-6 w-100 ${className}`}>{children}</div>;
};