在React项目中包含css文件

Question

我正在尝试在react中使用material UI。

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

上面写着

material-components-web应作为对等依赖项自动安装。通过您选择的方法(使用链接标签、css加载器等)在项目中包含node_modules/material-components-web/dist/material-components-web.min.css。

但我不确定这到底是什么意思。我必须如何以及在哪里导入该文件才能使用该库？

Answer 1

首先，您应该通过运行以下命令将库添加到项目中：

npm install --save rmwc或yarn add 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；}

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