I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically 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>
);
The CSS is not being applied to the component in the renderItem function. However, if I use regular CSS, it works fine.
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>
);
Is there anyone who knows why this is happening? Is there a solution for me to use sass modules in a third-party component? Thank you in advance.
Note: Components or React elements outside of ScrollMenu are working correctly with the sass module.