物化 Ionic/Vue 中的 CSS/组件以与 Ionic 互换使用物化？答案

【问题标题】：Materialize CSS/components in Ionic/Vue to use materialize interchangeably with Ionic?物化 Ionic/Vue 中的 CSS/组件以与 Ionic 互换使用物化？
【发布时间】：2019-06-22 04:42:26
【问题描述】：

如果我将物化 css 链接放在 @ionic/vue 源代码的 index.html 的头部，我能否在 vue 和 ionic 组件内部/上使用这些 css 类样式？它会覆盖 Ionic 组件的默认样式吗？

【问题讨论】：

标签： css vue.js ionic-framework materialize

【解决方案1】：

不，添加 materialize 不会覆盖 ionic 组件。材料成分需要预先定义。

http://ionicmaterial.com/

https://github.com/zachfitz/Ionic-Material

【讨论】：

【解决方案2】：

我在 Vue/Ionic 中成功实现了 Materialize，另一个答案仍然是正确的，因为我没有考虑 Ionic 组件和使用普通 html(div) 组件之间的区别，并且仍然在 html 组件上使用 Vue 和 Ionic 函数是标记为 Materialize 类。

我只是在项目的根目录中设置了一个 sass 文件夹，并将我的预处理器设置为将输出保存到 /src/assets/ 文件夹。然后我在 main.js 中添加了导入：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import './assets/materialize.min.css';
import './assets/materialize.min.js';

然后我在 /public/index.html 文件中添加了 html 导入：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="<%= BASE_URL %>materialize.min.css" rel="stylesheet">
  <title>CIWI</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but CIWI doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="<%= BASE_URL %>materialize.min.js"></script>
</body>

</html>

现在，当我创建组件时，我可以通过添加具体化类来选择使用具体化组件和主题而不是 Ionic。

【讨论】：

但是我发现Ionic有不错的主题控制，所以我想这都是多余的。