我在我的react typescript项目中使用了Nuka-Carousel。我的实现工作到了一个需要更改控件容器位置的点（我想移动carousel上方的导航点并更改文本）。
要做到这一点，文档中说有一个名为getControlsContainerStyles的函数，它允许我使用以下方法更改控件容器的css属性：

getControlsContainerStyles={(key) => {
     switch (key) {
        case 'TopLeft':
          return {
            backgroundColor: "red",
          };
     default:
         // will apply all other keys
         return {
           backgroundColor: "blue",
         };
  }
  }}

但是，当我尝试访问此函数时，我得到以下错误：getControlsContainerStyles在类型intrinsicAttributes上不存在& Pick〈partial〈internalcarouselprops....
文档的链接在这里https://www.npmjs.com/package/nuka-carousel/v/4.8.4
我的组件如下：

import React, { useState, useEffect } from 'react';
import { ICompetition } from '../interfaces/ICompetition';
import { IEvent } from '../interfaces/IEvent';
import "../App.css";
import { IMarket } from '../interfaces/IMarket';
import Market from './Market';
import Carousel, { PagingDots } from 'nuka-carousel';

interface CompetitionProps {
    competition: ICompetition;
    marketTypeFilter: string;
    competitionMeetingIdSetter: (arg0: string) => void;
}

    function Competition(props: CompetitionProps) {
    const { competition, marketTypeFilter, competitionMeetingIdSetter } = props;
    const [meetingId, setMeetingId] = useState("");
    const query = new URLSearchParams(window.location.search)
    var mid = (query.has('mid') ? query.get('mid') : '');

    useEffect(() => {
        competitionMeetingIdSetter(meetingId);
    }, [competitionMeetingIdSetter, meetingId]);

    return (
        <div id="carouselIndicators">            
            {competition.sportId == 19 || meetingId !== "" ?
                (
                    <Carousel disableEdgeSwiping={true} autoplay={false} adaptiveHeight={true} renderCenterRightControls={null}
                        renderCenterLeftControls={null} renderBottomCenterControls={null} renderTopCenterControls={({ }) => (
                            <div>{competition.venue}</div>
                        )}
                        defaultControlsConfig={{
                            pagingDotsStyle: {
                                fill: 'red',
                                position: 'absolute',
                                top: '1px'
                            }
                            
                        }}                        
                        getControlsContainerStyles={(key) => {
                            switch (key) {
                                case 'TopLeft':
                                    return {
                                        backgroundColor: "red",
                                    };
                                default:
                                    // will apply all other keys
                                    return {
                                        backgroundColor: "blue",
                                    };
                            }
                        }}>
                            {competition.events && competition.events instanceof Array && competition.events?.map((event: IEvent) => (
                                <Market markets={event.markets} marketTypeFilter={marketTypeFilter} />
                            ))}
                    </Carousel>
                )
                :
                (
                    <div id="runnerContainer">
                        <div className="container">
                            <div className="row">
                                <div className="col-12">
                                    <div id={competition.competitionId.toString()} className="text-left" style={{ minWidth: 0, textOverflow: 'ellipsis', overflow: 'hidden' }}>
                                        <a id="lnkDisplay" style={{ justifyContent: 'left', fontWeight: 'bold' }} onClick={() => setMeetingId(competition.competitionId.toString())}>
                                            <span id="lblcompText" className="headerFontColour" >{competition.venue}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-12">
                                    {competition.events && competition.events instanceof Array && competition.events?.map((event: IEvent) => (
                                        <button type="button" className="button button-primary raceButton" key={event.eventId} onClick={() => setMeetingId(competition.competitionId.toString())} >
                                            {new Date(event.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                        </button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                )
            }
        </div>
    );
    }

    export default Competition;