Блог

Есть ли способ изменить довольно большие верхние и нижние отступы в сетке семантического пользовательского интерфейса?

Вот пример кода, который произвел заполнение сверху и снизу 1rem:

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

{/* ... */}

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

К сожалению, я не нашел встроенного варианта, но это сработало:

 
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;
}