React中使用CSS Module时如何通过父容器为子按钮设置间距

解决方案 #

你当前的样式未生效的核心原因是Web端Flex布局需要手动声明容器的display: flex属性，而React Native中所有容器默认就是Flex布局，这是两端样式表现最常见的差异点之一。
你只需要修改styleHook.module.css里的.button-style类即可实现按钮间距：

.button-style {
  /* 新增：手动开启Flex布局，flex-direction属性才会生效 */
  display: flex;
  flex-direction: row;
  padding: 10px;
  /* 新增：控制Flex子元素之间的横向间距，数值可根据需求调整 */
  gap: 12px;
}

如果需要兼容低版本浏览器（不支持gap属性），也可以用子元素margin的方案实现：

.button-style {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
/* 给除了最后一个按钮之外的所有按钮加右侧间距 */
.button-style > button:not(:last-child) {
  margin-right: 12px;
}

React Native 与 Web Flex 核心差异梳理 #

• React Native 中所有容器默认自带display: flex属性，Web端必须手动声明才会触发Flex布局
• React Native 中Flex默认主轴方向为column（纵向），Web端Flex默认主轴方向为row（横向）
• Web端Flex/Grid布局支持gap属性直接控制子元素间距，无需处理margin折叠、首尾元素多余边距问题，React Native暂不支持该属性

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh