2

I'm creating my own React components for Google's Material Components for Web. I'm trying to get the styling to work. According to the docs, you need to add the following to your sass file:

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

Note: I think there is a bug in the docs - button.core-styles doesn't exist. I just commented it out.

When the button renders, it has all the classes on the element, but all the styles associated with those classes are missing. So it doesn't look like an MDC button.

I found this bug report, which lead me to try this:

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

And voila! The button is styled!

Can someone explain to me what the difference is between the @use and @import options? And why I would use one over the other?

Full example:

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"
    ]
  }
}
Mark
  • 251
  • 2
  • 6

1 Answers1

0

Ugh. I just found this bug report. But the material.io website still has old info on it....

When I use:

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

The button is now styled.

Mark
  • 251
  • 2
  • 6