Base Sass API

Mixins

css-reset

@mixin css-reset { … }

Used By

• @mixin styles

css-utils

@mixin css-utils($disable-layer: false) { … }

Used By

• @mixin styles

Requires

• @function theme-get-var
• @function negate-var
• @function swap-position
• $avatar-color
• $light-theme-text-primary-color
• $light-theme-text-secondary-color
• $light-theme-text-hint-color
• $dark-theme-text-disabled-color
• $dark-theme-text-primary-color
• $dark-theme-text-secondary-color
• $dark-theme-text-hint-color
• $text-alignments
• $text-decorations
• $text-transforms
• $font-styles
• $font-weight
• $font-weights

use-light-theme

@mixin use-light-theme { … }

Examples

@use "@react-md/core";

.light-theme {
  @include core.use-light-theme;
}

use-dark-theme

@mixin use-dark-theme { … }

Examples

@use "@react-md/core";

.dark-theme {
  @include core.use-dark-theme;
}

variables

@mixin variables { … }

Examples

Example Usage SCSS

@use "@react-md/core" with (
  $disable-default-root-theme: true
);

@include core.styles;

:root {
  @include core.variables;
}

styles

@mixin styles($disable-layer: false, $disable-layer-order: $disable-layer, $disable-reset: false, $disable-css-utils: false) { … }

Examples

Example Usage SCSS

@use "@react-md/core";

@include core.styles;

Requires

• @mixin css-reset
• @mixin css-utils
• @mixin app-bar-variables
• @mixin app-bar-use-dark-theme
• $_layer-order
• $disable-default-root-theme
• $color-scheme

A simple CSS reset for react-md that:

• applies box-sizing: border-box to everything for easier positioning and calculations
• updates the html and body to be full height without any padding or margin to ensure your app can utilize the full viewport
• applies the root background, text color, and typography to the html element
• ensures touch events are bubbleable to the body element on iOS for "close on outside click" behavior
• remove the -webkit-tap-highlight-color for touch devices

This should not be used when using the styles mixin since it is included by default.

Provides all the css utility classes for react-md. Not including these styles will cause most components to look incorrect.

This should not be used when using the styles mixin since it is included by default.

Set this to true to prevent the css utils from being wrapped in @layer utils { ...styles... }

Used to apply all the light theme variables at once and will only include features/components that have not been disabled.

Used to apply all the dark theme variables at once and will only include features/components that have not been disabled.

Used to apply all the variables at once and will only include features/components that have not been disabled.

This should only be used when $disable-default-root-theme has been set to true since it is included in the styles mixin by default.

Generates all the styles for react-md respecting all feature flags.

Set this to true if all the react-md styles should not be wrapped in a css layer. You normally want this so it is easier to override react-md styles.

Set this to true to remove the layer ordering.

Set this to true to prevent the css-reset from being applied. This is only useful if you want to call the css-reset yourself since most components will not work correctly without this reset.

Set this to true to prevent the css-utils from being applied. This is only useful if you want to call the css-utils yourself since most components will not work correctly without this reset.