当其他menuItems左对齐时，如何使水平菜单中的(Antd)子菜单右对齐？

import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

const MenuItem = Menu.Item;

const App = () => {
  return (
    <Menu mode="horizontal" justify="start">
      <MenuItem key="mail" icon={<MailOutlined />}>
        邮箱
      </MenuItem>
      <SubMenu
        key="SubMenu"
        icon={<AppstoreOutlined />}
        title="应用程序"
        className="right-aligned-submenu"
      >
        <MenuItem key="setting:1">子菜单项 1</MenuItem>
        <MenuItem key="setting:2">子菜单项 2</MenuItem>
      </SubMenu>
    </Menu>
  );
};

export default App;

.right-aligned-submenu {
  text-align: right;
}