Как использовать стиль SASS

Question

Я создаю приложение ReactJS и используя Zurb Foundation 6. Я также использую React Modal: https://reactcommunity.org/react-modal/#documentation.

Я хочу, чтобы стиль Модаля был запущен через React Modal, чтобы выглядеть как Reveal Zurb Foundation. Reveal SASS выглядит следующим образом:

// 28. Reveal 
// ---------- 

$reveal-background: $white; 
$reveal-width: 600px; 
$reveal-max-width: $global-width; 
$reveal-padding: $global-padding; 
$reveal-border: 1px solid $medium-gray; 
$reveal-radius: $global-radius; 
$reveal-zindex: 1005; 
$reveal-overlay-background: rgba($black, 0.45); 

И мой Модальные CSS, как это:

.modal { 
    position: absolute; 
    width: 600px; 
    top: 20%; 
    left: 20%; 
    right: 20%; 
    bottom: 20%; 
    background-color: $white; 
} 

.OverlayClass { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba($black, 0.45); 
} 

Как я могу добиться этого? Я экспериментировал с @include, но не имел успеха. В настоящий момент модальность у меня не эстетична. Помощь очень ценится.

Answer 1

В разделе фундамента у вас есть только переменные конфигурации для раскрытия. Остальная часть .scss для раскрытия здесь https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss

Вы должны иметь возможность структурировать отображаемый HTML из вашего компонента в соответствии с элементами и классами из Foundation, просто избегайте Foundation JS.

Answer 2

.your-modal { 
@extend .reveal; 

/* write your custom css here */ 
} 

вместо использования .reveal, теперь вам просто нужно использовать старт .your-modal для модального контейнера.