ant-design/components/menu/demo/submenu-theme.md
David 2843bd32dd
feat: Add ability to overwrite Menu theme at Menu.SubMenu level. (#33971)
* Add theme support to Menu.SubMenu

* Tidy up docs

* Tidy up docs

* Update components/menu/index.en-US.md

* Update components/menu/index.en-US.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Add Chinese lang docs

* Extend menu theme demo to additionally demonstrate Sub-menu theming

* Add submenu theme demo

* Revert "Extend menu theme demo to additionally demonstrate Sub-menu theming"

This reverts commit 642a2b5b72.

* Add tests

* Correct typo

* Make demo vertical so absolutely positioned popover doesn't overflow

* Make demo functional component

* Update components/menu/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>

* Update components/menu/index.zh-CN.md

Co-authored-by: Amumu <yoyo837@hotmail.com>

* Update components/menu/demo/submenu-theme.md

Co-authored-by: MadCcc <1075746765@qq.com>

Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
2022-02-14 15:21:33 +08:00

1.5 KiB
Executable File

order title
5
zh-CN en-US
子菜单主题 Sub-menu theme

zh-CN

内建了两套主题 lightdark,默认 light

en-US

The Sub-menu will inherit the theme of Menu, but you can override this at the SubMenu level via the theme prop.

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

const { SubMenu } = Menu;

const SubMenuTheme = () => {
  const [theme, setTheme] = React.useState('light');
  const [current, setCurrent] = React.useState('1');

  const changeTheme = value => {
    setTheme(value ? 'dark' : 'light');
  };

  const handleClick = e => {
    setCurrent(e.key);
  };

  return (
    <>
      <Switch
        checked={theme === 'dark'}
        onChange={changeTheme}
        checkedChildren="Dark"
        unCheckedChildren="Light"
      />
      <br />
      <br />
      <Menu
        onClick={handleClick}
        style={{ width: 256 }}
        defaultOpenKeys={['sub1']}
        selectedKeys={[current]}
        mode="vertical"
        theme="dark"
      >
        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" theme={theme}>
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
        </SubMenu>
        <Menu.Item key="5">Option 5</Menu.Item>
        <Menu.Item key="6">Option 6</Menu.Item>
      </Menu>
    </>
  );
};

ReactDOM.render(<SubMenuTheme />, mountNode);