How to use @react-md/theme - 10 common examples

import React, { FC } from "react";
import { bem } from "@react-md/theme";
import { Text } from "@react-md/typography";

export interface ColorValue {
  name: string;
  value: string;
}

interface ColorProps extends ColorValue {
  primary?: string;
  secondary?: boolean;
}

const block = bem("color-palette");

const Color: FC = ({ name, value, primary, secondary }) => {
  const withoutRMD = name.replace("rmd-", "");
  let hexValue = value;
  if (hexValue.length === 4) {
    // ensure that hex colors are always 6 characters instead of their shortened
    // 3 character versions
    hexValue = `${hexValue}${hexValue.substring(1)}`;
  }

  return (

import React, { FC } from "react";
import { bem } from "@react-md/theme";

import "./Container.scss";

interface Props {
  centered?: boolean;
}

const block = bem("card-container");

const Container: FC = ({ children, centered }) => (
  <div>{children}</div>
);

export default Container;

export interface CodeBlockProps {
  className?: string;
  language?: string;
  children: ReactNode;
  highlight?: boolean;
  lineNumbers?: boolean;
}

type WithRef = WithForwardedRef;
type DefaultProps = Required<
  Pick
>;
type WithDefaultProps = CodeBlockProps & DefaultProps & WithRef;

const block = bem("code");

const CodeBlock: FC = props => {
  const {
    className,
    language,
    children: propChildren,
    highlight,
    forwardedRef,
    lineNumbers,
  } = props as WithDefaultProps;

  const children = useMemo(() => {
    if (!highlight || typeof propChildren !== "string") {
      return <code>{propChildren}</code>;
    }

import { AppBar, AppBarTitle, AppBarAction } from "@react-md/app-bar";
import { MenuSVGIcon } from "@react-md/material-icons";
import { bem } from "@react-md/theme";
import { MobileOnly } from "@react-md/utils";

import AppBarNav from "components/AppBarNav";

interface SandboxNavigationProps {
  name: string;
  from: string;
  fileName: string;
  onRequestFiles: () => void;
  onRequestClose: () => void;
}

const block = bem("sandbox-modal");

const SandboxNavigation: FC = ({
  name,
  from,
  fileName,
  onRequestFiles,
  onRequestClose,
}) => {
  return (

type WithRef = WithForwardedRef;
type DefaultProps = Required<
  Pick<
    TextAreaProps,
    | "theme"
    | "resize"
    | "defaultValue"
    | "underlineDirection"
    | "error"
    | "rows"
    | "maxRows"
  >
>;
type WithDefaultProps = TextAreaProps & DefaultProps & WithRef;

const block = bem("rmd-text-field");

const TextArea: FC = providedProps => {
  const {
    style: propStyle,
    className,
    areaStyle,
    areaClassName,
    forwardedRef,
    resize,
    label,
    theme,
    error,
    inline: propInline,
    onBlur: propOnBlur,
    onFocus: propOnFocus,
    onChange: propOnChange,

import { MenuSVGIcon, CloseSVGIcon } from "@react-md/material-icons";
import { bem } from "@react-md/theme";

import AppBarNav from "components/AppBarNav";
import AppBarAction from "components/AppBarAction";

export interface HeaderProps {
  inline: boolean;
  isDesktop: boolean;
  toggleSheet: () => void;
  isSheetVisible: boolean;
  projectName: string;
  onRequestClose: () => void;
}

const block = bem("code-previewer");

const Header: FC = ({
  inline,
  isDesktop,
  toggleSheet,
  isSheetVisible,
  projectName,
  onRequestClose,
}) => (
  
    {!isDesktop && (

Radio,
} from "@react-md/form";
import {
  PersonSVGIcon,
  PhoneSVGIcon,
  LocationOnSVGIcon,
  EmailSVGIcon,
} from "@react-md/material-icons";
import { bem } from "@react-md/theme";

import Phone from "components/Phone";
import states from "constants/states";

import "./ExampleForm.scss";

const block = bem("example-form");

const themes: TextFieldTheme[] = ["none", "underline", "filled", "outline"];

const ExampleForm: FC = () => {
  const [currentTheme, handleChange] = useChoice("outline");
  const isUnstyled = currentTheme === "none";

  return (
    
      <fieldset>
        {themes.map(theme =&gt; (
          </fieldset>

import React, { FC } from "react";
import { Text, TextContainer } from "@react-md/typography";
import { List, ListItem } from "@react-md/list";
import { IFiles } from "codesandbox-import-utils/lib/api/define";
import { bem } from "@react-md/theme";
import Code from "components/Code/Code";
import { Card, CardHeader, CardTitle, CardContent } from "@react-md/card";

export interface FileNotFoundProps {
  fileName: string;
  sandbox: IFiles | null;
  offset: boolean;
  onFileChange: (fileName: string) => void;
}

const block = bem("sandbox-modal");
const FileNotFound: FC = ({
  offset,
  fileName,
  onFileChange,
  sandbox,
}) => {
  return (
    <div offset="">
      
        
        {sandbox &amp;&amp; (
          
            
              Did you mean one of:</div>

import { AddCircleSVGIcon } from "@react-md/material-icons";
import { Menu, MenuItem } from "@react-md/menu";
import { bem } from "@react-md/theme";
import { useToggle } from "@react-md/utils";

import Phone from "components/Phone";

import "./ExpandableChips.scss";

const PERSONAL_EMAIL = "jjeckhart@email.com";
const WORK_EMAIL = "jjeckhart@workemail.com";

const getSrc = (isWork: boolean): string =>
  `https://i.pravatar.cc/40?img=${isWork ? 4 : 3}`;

const block = bem("expandable-chip-example");

const ExpandableChips: FC = () => {
  const [visible, showMenu, hideMenu] = useToggle(false);
  const [isWork, , , toggleWork] = useToggle(false);
  return (
    
      <div>
        <label>
          To
        </label>
        }
        &gt;</div>

import React, { FC } from "react";
import { bem } from "@react-md/theme";
import Color, { ColorValue } from "./Color";

interface ColorListProps {
  baseColor: string;
  colors: ColorValue[];
}

const block = bem("color-palette");

const ColorList: FC = ({ baseColor, colors }) => {
  const baseName = `rmd-${baseColor}-500`;
  const baseValue = (colors.find(c => c.name === baseName) || colors[6]).value;
  return (
    <ol>
      
      {colors.map(({ name, value }) =&gt; (
        </ol>