React Modal Component Styling

Modal Styling

Learn how to customize the React Modal component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

On this page

CSS variables#

React Modal supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

--cui-modal-zindex: #{$zindex-modal};
--cui-modal-width: #{$modal-md};
--cui-modal-padding: #{$modal-inner-padding};
--cui-modal-margin: #{$modal-dialog-margin};
--cui-modal-color: #{$modal-content-color};
--cui-modal-bg: #{$modal-content-bg};
--cui-modal-border-color: #{$modal-content-border-color};
--cui-modal-border-width: #{$modal-content-border-width};
--cui-modal-border-radius: #{$modal-content-border-radius};
--cui-modal-box-shadow: #{$modal-content-box-shadow-xs};
--cui-modal-inner-border-radius: #{$modal-content-inner-border-radius};
--cui-modal-header-padding-x: #{$modal-header-padding-x};
--cui-modal-header-padding-y: #{$modal-header-padding-y};
--cui-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--cui-modal-header-border-color: #{$modal-header-border-color};
--cui-modal-header-border-width: #{$modal-header-border-width};
--cui-modal-title-line-height: #{$modal-title-line-height};
--cui-modal-footer-gap: #{$modal-footer-margin-between};
--cui-modal-footer-bg: #{$modal-footer-bg};
--cui-modal-footer-border-color: #{$modal-footer-border-color};
--cui-modal-footer-border-width: #{$modal-footer-border-width};

--cui-backdrop-zindex: #{$zindex-modal-backdrop};
--cui-backdrop-bg: #{$modal-backdrop-bg};
--cui-backdrop-opacity: #{$modal-backdrop-opacity};

How to use CSS variables#

const customVars = {
  '--cui-modal-color': '#555',
  '--cui-modal-bg': '#efefef',
}

return <CModal style={customVars}>{/* Modal content */}</CModal>

SASS variables#

$modal-inner-padding:               $spacer !default;

$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               null !default;
$modal-content-bg:                  var(--cui-body-bg) !default;
$modal-content-border-color:        var(--cui-border-color-translucent) !default;
$modal-content-border-width:        var(--cui-border-width) !default;
$modal-content-border-radius:       var(--cui-border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       var(--cui-box-shadow-sm) !default;
$modal-content-box-shadow-sm-up:    var(--cui-box-shadow) !default;

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;

$modal-header-border-color:         var(--cui-border-color) !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-footer-bg:                   null !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-footer-border-width:         $modal-header-border-width !default;

$modal-sm:                          300px !default;
$modal-md:                          500px !default;
$modal-lg:                          800px !default;
$modal-xl:                          1140px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;

SASS loops#

Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.

@each $breakpoint in map.keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}