Base Sass API

Mixins

mixin

Full Source Code

@mixin css-reset { … }

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.

mixin

Full Source Code

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

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.

Parameters
Name	Description	Type	Default Value
`$disable-layer`	Set this to `true` to prevent the css utils from being wrapped in `@layer utils { ...styles... }`	`Boolean`	`false`

mixin

Full Source Code

@mixin use-light-theme { … }

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

@use "@react-md/core";

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

@use "@react-md/core";

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

mixin

Full Source Code

@mixin use-dark-theme { … }

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

@use "@react-md/core";

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

@use "@react-md/core";

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

mixin

Full Source Code

@mixin variables { … }

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.

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

@include core.styles;

:root {
  @include core.variables;
}

mixin

Full Source Code

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

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

Parameters
Name	Description	Type	Default Value
`$disable-layer`	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.	`Boolean`	`false`
`$disable-layer-order`	Set this to `true` to remove the layer ordering.	`Boolean`	`$disable-layer`
`$disable-reset`	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.	`Boolean`	`false`
`$disable-css-utils`	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.	`Boolean`	`false`

@use "@react-md/core";

@include core.styles;