Question

我正在尝试在React中创建一个简单的组件，我试图从这里https://getmdl.io/started/index.html使用Google的MDL，因此他们声明我需要从他们的服务器链接CSS，我想知道我应该在哪里这样做。我尝试将它添加到主index.html并引用组件中的样式但似乎没有被使用。应该怎样做才能做到这一点？我是React的新手。

组件代码

import React from 'react';

class App extends React.Component {
   render() {
      return (
       <div>
           <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                   New button
           </button>
       </div>

      );
   }
}

export default App;

这是index.html

<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

Answer 1

您必须使用className而不是class来引用React中的css类，因为class是ES6中的保留字，而使用JSX，您正在编写Javascript而不是HTML。例如：

<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    New button
 </button>

如何将远程CSS链接到React组件

1 个答案: