如何将样式导入 React for Material Components for Web答案

【问题标题】：How to import styles into React for Material Components for Web如何将样式导入 React for Material Components for Web
【发布时间】：2021-10-09 05:29:36
【问题描述】：

我正在为 Google 的 Material Components for Web 创建自己的 React 组件。我正在尝试使样式正常工作。根据docs，您需要在您的sass文件中添加以下内容：

    @use "@material/button";
//    @include button.core-styles;

注意：我认为文档中有一个错误 - button.core-styles 不存在。我只是把它注释掉了。

当按钮呈现时，它具有元素上的所有类，但与这些类关联的所有样式都丢失了。所以它看起来不像是 MDC 按钮。

我找到了this bug report，这让我尝试了这个：

    @import "@material/button/mdc-button";

瞧！按钮的样式！

有人可以向我解释@use 和@import 选项之间的区别吗？为什么我会使用一个而不是另一个？

完整示例：

按钮.scss

@import "~@material/button/mdc-button";

Button.js

import './Button.scss';
import {useEffect, useRef} from 'react';
import {MDCRipple} from '@material/ripple';

function Button(props) {
    const buttonElement = useRef(null);

    useEffect(() => {
        const ripple = new MDCRipple(buttonElement.current);
        return () => {
            ripple.destroy();
        }
    });

    return (
        <button className="mdc-button mdc-button--raised" ref={buttonElement}>
            <span className="mdc-button__ripple"></span>
            <span className="mdc-button__label">{props.children}</span>
        </button>
    );
}

export default Button;

package.json

{
  "name": "button-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material/button": "^12.0.0",
    "@material/ripple": "^12.0.0",
    "@material/theme": "^12.0.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "install": "^0.13.0",
    "npm": "^7.20.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "sass": "^1.37.5",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

标签： reactjs material-components-web

【解决方案1】：

呃。我刚刚找到了这个bug report。但是material.io网站上仍然有旧信息....

当我使用时：

@use "~@material/button/styles";

按钮现在已设置样式。

【讨论】：