如何修改Semantic-UI React中Grid.Column的上下内边距

你当前代码中产生的1rem上下内边距，是由<Grid>组件的relaxed属性带来的，可通过以下几种方式调整间距：

• 方法1：调整Grid内置属性
  直接移除relaxed属性即可得到默认的0.5rem上下内边距，若需要完全关闭默认内边距，可添加padded={false}属性：

import {Grid} from 'semantic-ui-react';

{/* ... */}

<Grid container={true} padded={false}>
            <Grid.Column >
                <h3>TEST TEST</h3>
            </Grid.Column>
{/* ... */}

• 方法2：自定义CSS覆盖默认样式
  如果需要自定义特定的间距数值，可给Grid或Grid.Column添加自定义类名，覆盖默认样式规则：
  JSX代码示例：

<Grid container={true} className="custom-grid">
  <Grid.Column>
    <h3>TEST TEST</h3>
  </Grid.Column>
</Grid>

对应CSS代码：

/* 可按需调整上下内边距数值 */
.custom-grid .ui.column {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

• 方法3：修改主题变量全局生效
  如果你已经配置了Semantic UI自定义主题，可直接修改主题配置文件site/elements/grid.variables中的对应变量，修改后会全局生效：

@gridVerticalPadding: 0.3rem;

内容的提问来源于stack exchange，提问作者Toni Bünter