Question

我正在尝试使用材质用户界面做出反应。

在本网站上：https://jamesmfriedman.github.io/rmwc/installation

它说

material-components-web应作为对等依赖项自动安装。通过您选择的方法（使用链接标记，css-loader等）在项目中包含node_modules / material-components-web / dist / material-components-web.min.css。

但我不确定这究竟意味着什么。如何以及在何处导入该文件以使用此库？

Answer 1

首先，您应该通过运行：

将库添加到项目中

npm install --save rmwc或yarn add rmwc

其次，您应该了解以下内容：

一般来说，Material Components Web库实际上是一组预建的设计风格，您可以链接到项目以使其看起来像材料。

您正在使用的库React Material Web Components [RMWC]是以前库的React包装器。这意味着它为您提供了一组灵活的React组件，如<Button />，<TextField />等，它们构建在React中并在虚拟DOM中运行。

它没有给元素赋予任何特定的样式。此外，它的设计不会为您提供任何额外的造型。要使导入的React组件看起来像材料，您应该从父库[Material Components Web]添加样式。

要从该库添加样式，请使用以下命令：

将其添加到您的项目中：

npm install material-components-web或yarn add material-components-web

然后使用以下行（在项目中使用一次）：

import 'node_modules/material-components-web/dist/material-components-web.min.css';

Answer 2

RMWC执行ReactJS包装。样式仍然由MDC完成。

您可以将缩小的mdc css文件添加到您的项目中，但这不会带来太多自定义。我建议您将sass用于您的项目，然后在其中导入该mdc模块。这样，您可以更改变量，例如从原色开始，如下所示：https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme

$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;

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

可以在文档中找到有关如何专门针对RMWC使用样式的更深入的文档：https://jamesmfriedman.github.io/rmwc/styling

但是总体来说，您可以创建自己的类，然后将其应用于按钮等元素。例如

.my-button-style {
  border-radius: 10px;
}

或者您直接重写mdc类。 .mdc-button { border-radius：10px; }

可以在GitHub上的每个软件包站点中找到mdc类。（例如，用于按钮：https://github.com/material-components/material-components-web/tree/master/packages/mdc-button）

在React项目中包含一个css文件

2 个答案: