如何使 Chakra ui react 主题抽屉有一个与抽屉开头对齐的 closeButton 图标答案

【问题标题】：How to make a Chakra ui react theme drawer have a closeButton icon that aligns to the beginning of the drawer如何使 Chakra ui react 主题抽屉有一个与抽屉开头对齐的 closeButton 图标
【发布时间】：2022-04-27 17:23:10
【问题描述】：

我正在关注如何创建抽屉滑出菜单的这个 Chakra 文档：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 浏览器没有发生任何变化。

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

谢谢

【问题讨论】：

标签： css reactjs css-selectors chakra

【解决方案1】：

您需要做的就是：

 <DrawerCloseButton right="0px" left="5px"  />

将right property 设置为0px 会删除chakraUi 默认right prop 并自己使用左侧property。

【讨论】：

【解决方案2】：

如果您看到关闭按钮的 elemets 输出，您可以看到关闭按钮的样式是 position: absolute。话虽如此，如果您想让关闭按钮进入抽屉的左侧，您可以简单地将位置更改为相对位置并使用边距或填充设置位置。所以结果可能是这样的

<DrawerCloseButton position="relative" ml="10px"  />

或者您可以根据需要简单地更改边距/填充

【讨论】：