Question

我正在构建一个ReactJS应用程序并使用Zurb Foundation 6.我也在使用React Modal：https://reactcommunity.org/react-modal/#documentation。

我想通过React Modal推出的Modal样式看起来像Zurb Foundation的Reveal。 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);

我的Modal 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

.your-modal {
@extend .reveal;

/* write your custom css here */
}

而不是使用.reveal，现在您只需要使用开始.your-modal作为模式容器。

Answer 2

你在那里的基础部分只是揭示的配置变量。显示的.scss的其余部分在https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss

您应该能够从组件中构建呈现的HTML以匹配Foundation中的元素和类，只需避免使用Foundation JS。

如何重用SASS风格

2 个答案: