This is my code. And I want to change the background color maintaining the hovering effect. How can I do that?
<CommandBar
styles={{
root: {
paddingLeft: 0,
paddingRight: 0,
selectors: {
"& .ms-OverflowSet-item:nth-child(4)": {
display: "flex",
flexGrow: 1,
},
},
},
}}
overflowItems={props.overflowItems}
items={props.items}
/>
Official documentation => https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar
Thanks in advance!
Here you go... inject inline style or create a shared component as needed
//#region Component Command Bar Ux
private _commandbarItems: ICommandBarItemProps[] = [
{
key: 'refresh',
text: 'Refresh',
iconProps: { iconName: 'Refresh' },
onClick: () => this._getDataList(this._filter),
},
{
key: 'run',
text: 'Run Jobs',
iconProps: { iconName: 'Play' },
buttonStyles:{
root: {
backgroundColor: '#0078D4',
color: 'white',
fontWeight: 'bold',
}
},
onClick: () => this._onCommandSyncDialog(),
},
...