fluentui/react-northstar 菜单如何在内容和包装器之间提供空间答案

【问题标题】：fluentui/react-nortstar Menu how to provide space between content and wrapperfluentui/react-northstar 菜单如何在内容和包装器之间提供空间
【发布时间】：2022-07-01 22:48:33
【问题描述】：

我们如何覆盖样式并在内容和包装器之间提供空间，

尝试添加样式

const myTheme: ThemeInput = {
   componentStyles: {
    Menu: {
      root: {
        color: "yellow",
        //tried to provide maring space but it is taking for whole menu, rather menuitem content 
      },
    }
  }
 };

【问题讨论】：

您能否详细说明“内容和包装”之间的空间？请分享一些带有亮点的截图？
fluentsite.z22.web.core.windows.net/0.60.1/components/menu/… 在提供链接中，我们有带下划线的菜单，我想让它看起来像我附上的上图
是去掉下划线还是增加空格？请您尝试如下： import React, { Component } from "react";从“样式组件”导入样式；导出默认类 MyLabel 扩展组件 { render() { return {this.props.children}; } } const StyledMyLabel = styled(MyLabel)` 颜色：绿色； `;
我想增加空间
您可以为此使用自定义 css。您需要通过检查<span class="ui-menu__itemcontent of og oh oi bz gx" dir="auto">Editorials</span 来覆盖以下类：.oi { margin-bottom: 0.7143rem; }。然而，这不是理想的方式。

标签： microsoft-teams fluent-ui fluentui-react

【解决方案1】：

我做了以下事情。我认为仍然有一些轻微的跳跃来自MenuItemWrapper。您可以玩弄这些数字，看看是否可以获得所需的尺寸。文档真的不清楚，不知道以后的版本会不会去掉这种方法。

<Menu underlined primary defaultActiveIndex={0} styles={{ border: 0 }}
    items={[
        {
            key: "itemOne",
            content: "ItemOne",
            styles: ({ props }) => {
                return {
                    paddingBottom: 5,
                    marginBottom: props.active ? 0 : 5,
                    ":hover": {
                        marginBottom: 0,
                        paddingBottom: 5
                    }
                };
            }
        },
        // ...other items 
    ]}
/>

【讨论】：

【解决方案2】：

您可以为此使用自定义 css。您需要通过检查来覆盖下面的类

<span class="ui-menu__itemcontent of og oh oi bz gx" dir="auto">Editorials</span

如下：

 .oi {
     margin-bottom: 0.7143rem;
   }

【讨论】：

问题已解决，感谢您的帮助