Why is css/ sass modules not working with third party library?

I wonder why my sass modules is not affected when I use third party component. In particular, I use react-horizontal-scrolling-menu

<ScrollMenu
   selected={selected}
   scrollToSelected={true}
   data={items && items.map((item: any) => renderItem(item))}
/>

import styles from './index.module.scss';

const renderItem = (item: any) => (
    <div
      onClick={() => {
        handleClickScroll(item.id);
      }}
      key={item.id}
      className={styles['my-item']}
    >
      <img style={imgStyle} src={item.image} alt="loyalty-img" />
      <div className="item-title">{item.name}</div>
    </div>
  );

CSS is not applied to component in renderItem function. But if I use css, it works perfectly.

import './index.css' 

const renderItem = (item: any) => (
    <div
      onClick={() => {
        handleClickScroll(item.id);
      }}
      key={item.id}
      className="my-item"
    >
      <img style={imgStyle} src={item.image} alt="loyalty-img" />
      <div className="category-container-items-title">{item.name}</div>
    </div>
  );

Does anyone know what reason behinds it? Is there any solution for me to use sass module in third party component? Thank in advance.

Note: Components or React elements outside ScrollMenu work correctly with sass module.

It sounds like there might be a scoping issue with your Sass modules. When you import styles from './index.module.scss', those styles are only applied to elements within that specific component. However, when you pass a function as a prop to a third-party component like ScrollMenu, it creates a new scope and the styles may not be applied correctly.

One possible solution is to try using global CSS classes in your Sass modules instead of local ones. For example, instead of defining a class like '.my-item' in your index.module.scss file, define it as ':global(.my-item)'. This will ensure that the class is applied globally and not just within the scope of your component.

Another solution could be to pass the styles as props to the ScrollMenu component, so that they can be applied directly within the component's scope. For example:

<ScrollMenu
  selected={selected}
  scrollToSelected={true}
  data={items && items.map((item: any) => renderItem(item))}
  styles={{ item: styles['my-item'] }}
/>

Then in your renderItem function, you can access the styles through the styles prop:

const renderItem = (item: any, styles: any) => (
  <div
    onClick={() => {
      handleClickScroll(item.id);
    }}
    key={item.id}
    className={styles.item}
  >
    <img style={imgStyle} src={item.image} alt="loyalty-img" />
    <div className="category-container-items-title">{item.name}</div>
  </div>
);

I hope this will help you.