客製化導航

如果您想自定義自己的導航按鈕，您可以這樣做

以下示例包括如何覆蓋樣式並確定第一個和最後一個按鈕的樣式。

import BearCarousel, {elClassName, IBearCarouselProps} from 'bear-react-carousel';
import styled from 'styled-components';

<BearCarousel 
    // ...ignore some
    isEnableNavButton
    renderNavButton={(toPrev, toNext) => {
        return <div className={elClassName.navGroup}>
            <CustomButton type="button" className={elClassName.navPrevButton} onClick={toPrev}>
                {'く'}
            </CustomButton>
            <CustomButton type="button" className={elClassName.navNextButton} onClick={toNext}>
                {'く'}
            </CustomButton>
        </div>
    }}
/>

const CustomButton = styled.button`
  &.${elClassName.navPrevButton},
  &.${elClassName.navNextButton}
  {
    background: none;
    color: #00a400;
    border: 1px solid;
    border-radius: 99em;
    font-weight: 900;
    font-size: 20px;
  }
`;


const CustomNavCarouselRoot = styled.div`
  .${elClassName.root}[data-first-page],
  .${elClassName.root}[data-last-page]{
       .${elClassName.navPrevButton},
       .${elClassName.navNextButton} {
         opacity: 1;
         pointer-events: auto;
       }
  }
`;

確認左右導航按鈕的樣式？