无法覆盖主要反应菜单组件中的 css top 属性

Posted 2023-02-22

【中文标题】无法覆盖主要反应菜单组件中的 css top 属性

【英文标题】：Unable to overwrite css top property in prime react menu component

【发布时间】：2020-03-22 11:50:03

【问题描述】：

我正在尝试摆脱空间，如下图所示：

我正在使用来自 this documentation 的 primereact 的菜单组件

这是我的构造函数代码供参考：

constructor() 
        super();
            this.state = 
                items: [
                    
                        label: 'First Services',
                        items: [
                        label: 'firstitem', 
                        command: (event) => window.open('http://someurl','_blank');,

                        label: 'firstitemname', 
                        command: (event) => window.open('http://someurl#get-firstitemname','_blank');,


                        label: 'firstcategoryname', 
                        command: (event) => window.open('http://someurl#get-firstcategoryname','_blank');,



                            ]
                    , 
                    
                        label: 'Second Services',
                        items: [
                        label: 'testforuser ',
                        command: (event) => window.open('http://someurl#get-testforuser','_blank');,

                        label: 'testforproject', 
                        command: (event) => window.open('http://someurl#get-testforproject','_blank');,


                        label: 'testforprotocol ',
                        command: (event) => window.open('http://someurl#get-testforprotocol','_blank');




                    ]
                    ,
                    
                        label: 'Workflows ',
                        items: [
                        label: 'Workflow for User ',
                         command: (event) => window.open('http://someurl#workflow-section','_blank');
                    ]
                    , 
                ]
            ;
       

这是我的Menu 和Button 组件定义：

                      <Menu 
                        model=this.state.items 
                        popup=true 
                        style=fontSize:'16px',width:'12%'
                        ref=el => this.menu = el
                        />
                         <Button  
                        label="My DropDown Menu" 
                        icon="pi pi-bars"
                        style=width:'12%',backgroundColor:'#000000'

                         onClick=

                            (event)=>this.menu.toggle(event)
                        
                        />

我知道Button 和Menu 之间有空格的原因。当我在 Firefox 浏览器上右键单击 MY DROPDOWN MENU 并选择 Inspect Element Q 时，我看到了以下内容——css top 属性设置为 118.5px。 ：

我正在尝试覆盖 top 属性并将其从 118.5px 更改为 60px。为此，我尝试像这样修改我的代码：

                   <Menu 
                    model=this.state.items 
                    popup=true 
                    style=fontSize:'16px',width:'12%',marginTop:'60px'
                    ref=el => this.menu = el
                    /> 

但它最终显示为像这样的单独属性：

如何修改top属性？

【参考方案1】：

首先使用控制台检查primereact 菜单正在使用哪些类，然后创建一个.css 文件并导入到您的.js 文件中。编写与使用控制台找到的类相同的名称，然后覆盖所需的属性。然后再次运行您的应用程序。它应该工作。附言我以前试过这个，这对我有用。

【参考方案2】：

Top 和 margin-top 在 CSS 中是两个不同的东西。

style=
    top:'60px'

CSS: Top vs Margin-top

【讨论】：

那么我应该如何修改我的示例中的top 值？你能回答我的问题吗？

是的，就像我给出的代码一样，ADD top:'60px' 那里没有留白的地方（留白是你不需要的另一件事），如果可行，请提供反馈 :) 只字不提: 将 'marginTop' 替换为 'top' 和魔法

谢谢。它第一次出现在那里，当我开始玩耍时（我的意思是当我单击下拉菜单然后右键单击 Inspect element Q 几次）时，它再次变为 118.5px 和另一个时间改为-243.5px，同样的问题仍然存在:(