0

我正在关注这个关于如何创建抽屉滑出菜单的 Chakra Doc：https ://chakra-ui.com/docs/overlay/drawer

使用以下组件：

import React from "react"
import ReactDom from "react-dom"

import {
    Drawer,
    DrawerBody,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
    useDisclosure ,
    Button,
    Input,
    IconButton
  } from '@chakra-ui/react'
  import styles from "./header.module.css"

  import { HamburgerIcon } from '@chakra-ui/icons'


  function DrawerExample() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    const btnRef = React.useRef()
  
    return (
      <>
        {/* <Button ref={btnRef} colorScheme='teal' onClick={onOpen}>
          Open
        </Button> */}
        
        
        <IconButton ref={btnRef} aria-label='Open menu' icon={<HamburgerIcon />} onClick={onOpen}/>

        <Drawer
          isOpen={isOpen}
          placement='left'
          onClose={onClose}
          finalFocusRef={btnRef}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton className={styles.closeButton} />
            <DrawerHeader>Create your account</DrawerHeader>
  
            <DrawerBody>
              <Input placeholder='Type here...' />
            </DrawerBody>
  
            <DrawerFooter>
              <Button variant='outline' mr={3} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme='blue'>Save</Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      </>
    )
  }

export default DrawerExample

我的CSS模块：

.drawer {
    padding: 10px
}

.closeButton {
    align-items:'left'
}

我可以创建一个滑出式菜单，但它 <DrawerCloseButton />与滑出式抽屉的末端对齐。我想让关闭按钮在抽屉的开头对齐（这样它就更靠近屏幕的边缘。

我按照这篇文章将按钮左对齐，但它不起作用 React-Native Button Align Center 浏览器中没有发生任何变化。

可能有人给我一些关于如何重新对齐滑出菜单上的关闭按钮图标的指导......

谢谢

4

0 回答 0