如何更改fluent-react-rect ui的命令栏的颜色？

发布于 2025-02-13 19:25:12 字数 623 浏览 0 评论 0原文

这是我的代码。我想更改保持悬停效果的背景颜色。我该怎么做？

<CommandBar
    styles={{
    root: {
    paddingLeft: 0,
    paddingRight: 0,
    selectors: {
        "& .ms-OverflowSet-item:nth-child(4)": {
          display: "flex",
          flexGrow: 1,
      },
    },
  },
}}
overflowItems={props.overflowItems}
items={props.items}
/>

官方文档=＆gt; https：// https://developer.microsofter.microsoft.com/en-en-us/fluentuii ＃/controls/web/commandbar

预先感谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

颜漓半夏 2025-02-20 19:25:12

在这里您...注入内联样式或根据需要创建共享组件

//#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(),
    },
...

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(),
    },
...

回复收藏 0 原文

~没有更多了~