title: React Button - Material Components for Web - Secondary Styling with SASS
body: <p>I'm creating a React Button component using Material Components Web.  I've gotten the default button working which uses the Primary theme colour.  I'd like to add an option for a secondary coloured button, but I'm not sure how to do this with the sass mixins.</p>
  <p>I found this <a href="https://github.com/material-components/material-components-web/issues/2200" rel="nofollow noreferrer">feature request</a> but the answer is out of date as the Button styles have been refactored.  Can someone point me in the right direction?</p>
  <p>Here's my Button implementation:</p>
  <p>Button.js</p>
  <pre class="lang-js prettyprint-override"><code>import './Button.scss';
  import { useEffect, useRef } from 'react';
  import { MDCRipple } from '@material/ripple';
  import PropTypes from 'prop-types'
  import classNames from 'classnames';
  
  function Button(props) {
    const buttonElement = useRef(null);
  
    useEffect(() =&gt; {
      const ripple = new MDCRipple(buttonElement.current);
      return () =&gt; {
        ripple.destroy();
      }
    }, []);
  
    const btnClassNames = classNames({
      'mdc-button': true,
      'mdc-button--outlined': props.outlined,
      'mdc-button--raised': props.contained,
      'mdc-button--unelevated': props.unelevated,
      'mdc-button--icon-leading': props.icon,
      'ids-button-secondary': props.secondary
    });
  
    const renderIcon = (icon) =&gt; {
      return(&lt;i className=&quot;material-icons mdc-button__icon&quot; aria-hidden=&quot;true&quot;&gt;{icon}&lt;/i&gt;);
    }
  
    return (
      &lt;button className={btnClassNames} ref={buttonElement} onClick={props.onClick} disabled={props.disabled}&gt;
        &lt;span className=&quot;mdc-button__ripple&quot;/&gt;
        { props.icon ? renderIcon(props.icon) : null }
        &lt;span className=&quot;mdc-button__label&quot;&gt;
          { props.children }
        &lt;/span&gt;
        { props.trailingIcon ? renderIcon(props.trailingIcon) : null }
      &lt;/button&gt;
    );
  }
  
  Button.propTypes = {
    outlined: PropTypes.bool,
    contained: PropTypes.bool,
    unelevated: PropTypes.bool,
    icon: PropTypes.string,
    trailingIcon: PropTypes.string,
    onClick: PropTypes.func,
    disabled: PropTypes.bool,
    secondary: PropTypes.bool,
  }
  
  export default Button;
  </code></pre>
  <p>theme.js</p>
  <pre class="lang-js prettyprint-override"><code>@forward '~@material/theme' with (
    $primary: #570D9E,
    $secondary: #43B02A,
    $background: #fff,
  );
  </code></pre>
  <p>Button.scss</p>
  <pre class="lang-css prettyprint-override"><code>@use './theme';
  @use &quot;~@material/button/mdc-button&quot;;
  @use &quot;~@material/button/_mixins&quot;;
  
  .ids-button-secondary {
     &lt; what do I implement here? &gt;
  }
  </code></pre>