Next.JS: Applied style jsx, but not working

[dauhnKim]

I am trying to change the UI using style jsx, but it does not work even after giving the className.

How can I customize it?

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const ItemsBanner = ({ carousel, ...rest }) => {
  const router = useRouter();

  const moveToProduct = item => {
    router.push(`/product/${item.node.slug}`);
  };
  return (
    // <Banner carousel={carousel} className="h-full" isSmall={true} showThumbs={false} showIndicators={false} showStatus={false} showArrows={false} selectedItem={2} />

    <div className={`flex relative is-small`}>
      <Carousel className="h-full" isSmall={true} emulateTouch showThumbs={false} showIndicators={false} showStatus={false} showArrows={false} selectedItem={2}>
        {carousel.length !== 0 &&
          carousel?.map((item, idx) => (
            <div className={`cursor-pointer`} key={idx} onClick={() => moveToProduct(item)}>
              <p className="mb-4 -mt-2 leading-none">
                <b>{idx + 1}</b> / {carousel.length}
              </p>
              <div className={`test-div`}>
                <img src={item?.node?.image.mediaItemUrl} alt="banner" />
              </div>
              <>
                <div className="text-[1.2rem] font-semibold text-left mt-4 mb-2 leading-none">{item.node.name}</div>
                <div className="text-sm tracking-wide text-left" dangerouslySetInnerHTML={{ __html: item.node.shortDescription }}></div>
              </>
            </div>
          ))}
      </Carousel>

      <div className="mx-10 mt-[200px] h-[40px] uppercase bg-black text-white py-2 px-4 rounded-full ">
        <Link href={`/category/${carousel[0].node.productCategories.edges[0].node.slug}`}>More</Link>
      </div>

      <style jsx>{`
        .is-small {
          background: black;
        }
        .carousel .slider-wrapper {
          overflow: visible !important;
          width: 20% !important;
        }
        .carousel .slide {
          padding: 25px;
          border: solid 1px #777;
          border-left: none;
        }
        .carousel .slide:first-child {
          border-left: solid 1px #777;
        }
      `}</style>
    </div>
  );
};

export default ItemsBanner;```

[zanio]

if anyone is still having issues importing the styles in next then do the following. this worked for me:

first you would need to install style-loader and css-loader then add the following code in _app.tsx

const isBrowserLoaded = typeof window !== 'undefined';
if (isBrowserLoaded) {
  require('!style-loader!css-loader!react-responsive-carousel/lib/styles/carousel.min.css');
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.