The style of antd this menu.item has no effect through className setting?

if I directly write menu.item style= {{margin: "30px 0"}:
< Menu > < Menu.Item style= {{margin: "30px 0"} > test < Menu.Item > < / Menu >
in demo, there is a gap of 30px,

.

if I write this:
< Menu > < Menu.Item className= "menuitem" > Test < Menu.Item > < / Menu >
and then quote it again in menu.css:.menuitem {margin:30px 0;}
, how can it not work? className is also effective when added to menu dom. Is there a loading order problem for
when used on menu.item? if I have to set menu.item style through className, how to solve it?
has anyone encountered this kind of problem?

Mar.03,2021

.menuitem {
    margin:30px 0 !important; //  className  Menu.Item 
}
Menu