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

Question

我正在为Google的Web材料组件创建自己的React组件。我在试着让造型起作用。根据docs，您需要在您的sass文件中添加以下内容：

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

注意:我认为文档中有一个bug -button.core-style是不存在的。我刚把它注释掉了。

当按钮呈现时，它包含元素上的所有类，但缺少与这些类关联的所有样式。所以它看起来不像一个MDC按钮。

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

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

瞧！按钮的样式是一样的！

有人能给我解释一下@use和@import选项之间的区别吗？为什么我要用一个而不是另一个呢？

完整示例：

Button.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"
    ]
  }
}

Answer 1

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

当我使用：

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

该按钮现在已设置了样式。