使用 className 而不是 class 中断 CSS

如何解决使用 className 而不是 class 中断 CSS

我目前正在使用 react 实现 Swiper。我使用子弹作为分页标记。我的分页代码如下所示：

<Swiper
                    navigation
                    pagination={{
                        clickable: true,renderBullet: function (index,className) {
                            return '<span class="' + className + '">' + (index + 1) + '</span>';
                        }
                    }}
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                >

由于我使用的是 react，所以 span 的属性应该是 className 而不是 class。问题是，如果我将其更改为 className 而不是 class，则不会应用项目符号的 CSS。希望有人能帮我解决这个问题，提前致谢。

解决方法

像这样使用它，

return <span className={`${className}`}>{index + 1}</span>;

这会奏效！