styled-components kütüphanesini kullanmanız lazım. Ayrıca Main ve Products için stil de belirlememişsiniz. Lütfen kodun tamamını aşağıdaki gibi değiştirin. Çalışırsa gerekli kısımların CSS düzenlemesini yaparsınız. Örnek olması açısından doldurdum.

import styled from 'styled-components';

const S = {
    Main: styled.div`
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        padding: 20px;
    `,
    Products: styled.div`
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 20px;
    `,
};

import { observer } from 'mobx-react-lite';
import { ProductList } from '@/storefront';
import { ProductSliderProps } from '../__generated__/types';
import 'swiper/css';
import { Swiper, SwiperSlide } from 'swiper/react';
import styles from './style.module.css';

const Right = ({ productList }: ProductListProps) => {
    return (
        <S.Main>
            <Header productList={productList} />
            <S.Products>
                <Swiper>
                    {productList.data.map((product) => (
                        <SwiperSlide key={product.selectedVariant.id}>
                            <Product product={product} />
                        </SwiperSlide>
                    ))}
                </Swiper>
            </S.Products>
            <Pagination productList={productList} />
        </S.Main>
    );
};

export default Right;