我在我的專案中使用 Fluent UI。我不知道如何改變hoover風格CommandBar。
我用 javascript 中的這個簡單代碼初始化我的按鈕：
// inside `buttons` array
key: 'newfolder',
text: 'New Folder',
iconProps: {
iconName: 'NewFolder',
styles: {
root: {
color: 'orange'
},
rootHovered: {
color: 'red'
}
}
},
onClick: ...
然后我將這個按鈕傳遞給CommandBar：
<CommandBar
items={buttons}
styles={{
root: {
paddingLeft: '5px'
},
}}
/>
我可以將默認顏色覆寫為詢問的顏色。
我的問題是，如何在組件中的按鈕上設定滑鼠懸停顏色CommandBar？
如您所見，即使我red作為 rootHovered 顏色傳遞，它仍然是藍色的。我無法將Hovered道具傳遞給，CommandBar因為我收到錯誤：
(property) rootHovered: {}
Type '{ root: { paddingLeft: string; }; rootHovered: {}; }' is not assignable to type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles> | undefined'.
Object literal may only specify known properties, and 'rootHovered' does not exist in type 'IStyleFunctionOrObject<ICommandBarStyleProps, ICommandBarStyles>'.ts(2322)
uj5u.com熱心網友回復：
您可以使用 buttonStyles 道具在懸停時更改它，如下所示：
text: 'New Folder',
buttonStyles: {
iconHovered: {
color: 'red'
}
},
了解有關此道具的更多資訊：https ://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar#implementation部分ICommandBarItemProps interface
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481453.html
標籤：javascript 反应 打字稿 流利的用户界面 流利的反应
上一篇：react-native/Typescript：如何將autoComplete值作為父組件屬性傳遞給TextInput？什么是正確的型別？
下一篇：打字稿部分鍵映射