リモートCSSをReactコンポーネントにリンクする方法

Reactでここのhttps://getmdl.io/started/index.htmlからGoogleのMDLを使用しようとしているシンプルなコンポーネントを作成しようとしていますので、自分のサーバーからCSSをリンクする必要がありますどこでこれを行うべきか知るために。私はそれをメインのindex.htmlに追加してコンポーネントのスタイルを参照しようとしましたが、使用されていないようです。これを行う適切な方法は何でしょうか？私はReactものの初心者です。リモートCSSを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;

これは、あなたがclassはES6中として予約語であるため、リアクトでCSSクラスを参照する代わりにclassのclassNameを使用する必要が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>

出典

2017-02-28 vishal dharankar

これをindex.htmlにリンクする必要があります。コンポーネントのスタイルをどのように参照しましたか？ –

@CésarLandesa正確に働いてくれてありがとう –

私はそれが助けてうれしいです:) –

ですJSXでは、HTMLではなくJavascriptを記述しています。例：

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

出典

2017-02-28 09:39:24

リモートCSSをReactコンポーネントにリンクする方法

答えて

関連する問題