Example from https://react-md.dev/packages/states/demos#setup-example

States Example - Setup Example

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>States Example - Setup Example</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement } from "react";
import { Button } from "@react-md/button";

export default function Demo(): ReactElement {
  return <Button id="state-button-1">Button 1</Button>;
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
