reactjs - 如何更改语义 UI 反应 Grid.Column 填充

Question

有没有办法改变 Semantic-UI Grid 中相当大的顶部和底部填充？

下面的示例代码产生了 1rem 的顶部和底部填充：

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

{/* ... */}

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

标签： reactjsgridpaddingsemantic-ui

Answer 1

不幸的是没有找到内置选项，但这有效：

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

{/* ... */}

 <Grid container={true} relaxed><Grid container={true} className={'narrow'} relaxed>
            <Grid.Column >
                <h3>TEST TEST</h3>
            </Grid.Column>
{/* ... */}

使用以下 CSS：

.ui.grid.narrow >.column:not(.row) {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}