How to use the react-md.bem function in react-md

const ReferenceList = ({ references, className, ...props }) => (
  <ul>
    {references.map(({ type, name, ref, url, caption }) =&gt; {
      if (url) {
        return <a href="{url}">{caption || url}</a>;
      }

      return (
        <li>
          [{type}]
        </li>
      );
    })}
  </ul>
);

zDepth={toolbarZDepth}
      />
    );
  }

  if (!mobile) {
    emulatorStatusBar = ;
  }

  return (
    
      {emulatorStatusBar}
      {emulatorToolbar}
      
        {children}
      
    
  );
};

const Color = ({ name, light, divide, color }) => {
  let colorName;
  if (color) {
    colorName = <h4>{color.replace(/-/g, ' ')}</h4>;
  }

  return (
    <li color="">
      {colorName}
      <div>{name}</div>
    </li>
  );
};

const Color = ({ name, light, divide, color }) => {
  let colorName;
  if (color) {
    colorName = <h4>{color.replace(/-/g, ' ')}</h4>;
  }

  return (
    <li color="">
      {colorName}
      <div>{name}</div>
    </li>
  );
};

});
    }

    return children;
  }

  let emulatorToolbar;
  let emulatorStatusBar;
  if (toolbar) {
    emulatorToolbar = (
      {toolbarNavIcon}}
        actions={toolbarActions}
        title={toolbarTitle}
        prominent={toolbarProminent}
        prominentTitle={toolbarProminentTitle}
        zDepth={toolbarZDepth}
      />
    );
  }

  if (!mobile) {
    emulatorStatusBar = ;
  }

  return (

const ExampleCard = ({ title, description: propDescription, code, children: propChildren, tableCard, ...props }) => {
  let markdown = '';
  if (code !== null) {
    markdown = `
\`\`\`jsx
${code}
\`\`\`
`;
  }

  const description = (
    
  );

  let children = propChildren;
  if (tableCard && description) {
    children = [
      {description},
      React.cloneElement(children, { key: 'table-card-example' }),
    ];
  } else if (!tableCard) {
    children = {description}{children};
  }

  const id = toCaterpillarCase(title.replace(/["'()'".:]/g, ''));

  return (

const Color = ({ name, light, divide, color }) => {
  let colorName;
  if (color) {
    colorName = <h4>{color.replace(/-/g, ' ')}</h4>;
  }

  return (
    <li color="">
      {colorName}
      <div>{name}</div>
    </li>
  );
};

const Message = () => (
  <p>
    <i>
      When the save for future visits checkbox is checked, cookies will be created to store your
      theme for later visits and other pages. If you do not check this checkbox, the default theme
      will be applied when you leave this page.
    </i>
  </p>
);

nav={{toolbarNavIcon}}
        actions={toolbarActions}
        title={toolbarTitle}
        prominent={toolbarProminent}
        prominentTitle={toolbarProminentTitle}
        zDepth={toolbarZDepth}
      />
    );
  }

  if (!mobile) {
    emulatorStatusBar = ;
  }

  return (
    
      {emulatorStatusBar}
      {emulatorToolbar}
      
        {children}
      
    
  );
};