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

Question

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

我正在使用本文档中的 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时，我看到了以下内容——csstop属性设置为118.5px. ：

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

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

但它最终显示为一个单独的属性，如下所示：

如何修改top属性？

Answer 1

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

Answer 2

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

style={{
    top:'60px'
}}

CSS：顶部与边缘顶部