React Button - Material Web 组件 - SASS 辅助样式

Question

我正在使用 Material Components Web 创建一个 React Button 组件。我已经获得了使用主要主题颜色的默认按钮。我想为第二个彩色按钮添加一个选项，但我不确定如何使用 sass mixins 来做到这一点。

我找到了这个 feature request 但答案已经过时，因为按钮样式已经重构。有人能指出我正确的方向吗？

这是我的按钮实现：

Button.js

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(() => {
    const ripple = new MDCRipple(buttonElement.current);
    return () => {
      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) => {
    return(<i className="material-icons mdc-button__icon" aria-hidden="true">{icon}</i>);
  }

  return (
    <button className={btnClassNames} ref={buttonElement} onClick={props.onClick} disabled={props.disabled}>
      <span className="mdc-button__ripple"/>
      { props.icon ? renderIcon(props.icon) : null }
      <span className="mdc-button__label">
        { props.children }
      </span>
      { props.trailingIcon ? renderIcon(props.trailingIcon) : null }
    </button>
  );
}

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;

theme.js

@forward '~@material/theme' with (
  $primary: #570D9E,
  $secondary: #43B02A,
  $background: #fff,
);

Button.scss

@use './theme';
@use "~@material/button/mdc-button";
@use "~@material/button/_mixins";

.ids-button-secondary {
   < what do I implement here? >
}

Answer 1

@use './theme';
@use "~@material/button/mdc-button";       // This line injects button's core styles
@use "~@material/button";                  // This line "imports" button's mixins

.ids-button-secondary {
  @include button.filled-accessible(red);  // This mixin sets fill color for a contained button.
}

这只是自定义按钮的一个例子。有许多 mixin 可以自定义其他属性，如文本颜色、图标颜色、大小、形状等。请参阅最新文档 here。

React Button - Material Web 组件 - SASS 辅助样式

React Button - Material Components for Web - Secondary Styling with SASS

reactjs

sass

material-components-web