React Nuka Carousel getControlsContainerStyles function

Question

我在react typescript项目中使用Nuka-Carousel。我有实现工作到一个点，我需要改变控制容器的位置(我想移动的导航点上方的旋转木马和改变文本)。

要做到这一点，文档说有一个函数叫做getControlsContainerStyles，它允许我改变控制容器的css属性，使用以下命令:

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

然而，当我试图访问这个函数时，我得到以下错误:getControlsContainerStyles不存在类型intrinsicAttributes &选择& lt; 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;

Answer 1

该方法已在库的v5中删除。你可能在你的应用程序中使用最新版本，但有错误的文档副本;最新的文档在这里。