[Chakra-UI] 使用 STack / HStack / VStack 时,将 "margin-inline-start: 0.5rem" 添加到子元素 ":not(style)~*:not(style)" 中,导致意外的 "margin" -左:8px"

这是个人回忆录。

环境 反应:17.0.2 下一个:11.1.3 @chakra-ui/反应:1.8.5 现象 在 HStack 中从第二个和后续的子元素无意间左边距:8px;给定了,设计崩溃了
<HStack className={styles.list}>
	<div>hoge</div>
	{/* 2つ目以降の要素から意図しない margin-left: 8px; が付与されてしまう */}
	<div>hoge</div>
	<div>hoge</div>
	<div>hoge</div>
</HStack>
.list {
    justify-content: space-between;
	flex-wrap: wrap;
}

原因 查看chakra-ui代码时,spacing = "0.5rem"写入文件node_modules/@chakra-ui/layout/src/stack.tsx 由于 HStack / VStack 只是包装了 STack,默认值为左边距:8px;已被授予

解决方案 1.指定spacing="0"
<HStack className={styles.list} spacing="0">
	<div>hoge</div>
	<div>hoge</div>
	<div>hoge</div>
	<div>hoge</div>
</HStack>
2. 停止STack / HStack / VStack 并更改为Box等并调整样式
<Box className={styles.list}>
	<div>hoge</div>
	<div>hoge</div>
	<div>hoge</div>
	<div>hoge</div>
</Box>
.list {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
参考

原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308623629.html

44人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册