Question

我正在使用Materialize设计我的react应用程序的样式，并且不断看到提到“向CSS文件中添加一些代码”以添加额外的自定义功能。因此，我制作了一个styles.css文件，并在其中添加了一些CSS，但是现在我不知道如何引用它。我已经尝试过将它放在这样的index.html文件中：

<!DOCTYPE html>
<html lang="en">

<head>


   <link rel="stylesheet" type="text/css" href="../src/style.css" /> 


  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <title>My title</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body> 
</html>

要测试是否使用了样式表，我添加了一些background-color属性，但背景颜色未更改。

所以我的问题是，当《物化指南》提到“将代码添加到CSS文件”时，此CSS代码在哪里？如何引用？这是我的CSS文件供参考：

 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: purple
  }

  main {
    flex: 1 0 auto;
  }

Answer 1

我将import './style.css'添加到了我的根反应类index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';

const routing = (
  <Provider store={configureStore()}>
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Login} />

        </Switch>
      </div>
    </Router>
  </Provider>
)

ReactDOM.render(
  routing,
  document.getElementById('root')
);

使用Materialize添加自定义样式以响应项目

1 个答案: