diff --git a/demos/checkbox.scss b/demos/checkbox.scss
index 6209f61d237..860d207aa05 100644
--- a/demos/checkbox.scss
+++ b/demos/checkbox.scss
@@ -22,7 +22,7 @@
 @import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-theme/mixins";
 
-.mdc-checkbox.demo-checkbox--custom-all {
+.demo-checkbox--custom-all {
   $color: $material-color-red-500;
 
   @include mdc-checkbox-focus-indicator-color($color);
@@ -41,7 +41,7 @@
   }
 }
 
-.mdc-checkbox.demo-checkbox--custom-stroke-and-fill {
+.demo-checkbox--custom-stroke-and-fill {
   @include mdc-checkbox-container-colors(
     $unmarked-stroke-color: $material-color-blue-500,
     $marked-fill-color: $material-color-purple-500);
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
index 8959a4b9a78..4e7818cf2d9 100644
--- a/packages/mdc-checkbox/mdc-checkbox.scss
+++ b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -23,18 +23,21 @@
 
 .mdc-checkbox {
   @include mdc-checkbox-base_;
-  @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
-  @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
   @include mdc-ripple-surface;
   @include mdc-states($mdc-checkbox-baseline-theme-color);
   @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
-  @include mdc-checkbox-container-colors();
 
   @include mdc-theme-dark {
     @include mdc-checkbox-container-colors($unmarked-stroke-color: $mdc-checkbox-border-color-dark);
   }
 }
 
+@at-root {
+  @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
+  @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
+  @include mdc-checkbox-container-colors;
+}
+
 // Needed to disable hover effects on CSS-only (non-JS) checkboxes
 .mdc-checkbox--disabled {
   @include mdc-checkbox--disabled_;