{ category: "Front-end" }
react-slickの矢印に独自のコンポーネントを使いたい場合の例はこちらにありますが、独自のスタイリングの設定でクラス渡すのに最初どうしたらいいのかわかりませんでした。
https://react-slick.neostack.com/docs/example/custom-arrows/
上記の例にある、propsで受け取っているclassNameはあくまでslick-arrow slick-nextのクラスを付与するもので、
nextArrow: <SampleNextArrow className={styles.nextArrow} />としてもクラスは渡せません。この場合任意のpropsを追加する必要があります。
nextArrow: <SampleNextArrow customClassName={styles.nextArrow} />
...
function SampleNextArrow(props) {
const { className, style, onClick, customClassName } = props;
return (
<div
className={classnames(className, customClassName)}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
}
のような形だとうまくいくと思います。