下の画像に示すように、スペースを取り除こうとしています。
このドキュメントからの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プロパティを変更するにはどうすればよいですか?