React Button - Web 的材质组件 - 使用 SASS 进行二次样式设置答案

【问题标题】：React Button - Material Components for Web - Secondary Styling with SASSReact Button - Web 的材质组件 - 使用 SASS 进行二次样式设置
【发布时间】：2021-08-05 01:51:28
【问题描述】：

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

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

这是我的 Button 实现：

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;

主题.js

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

按钮.scss

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

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

【问题讨论】：

标签： reactjs sass material-components-web

【解决方案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。

【讨论】：