2017-11-24 5 views
1

私はReact jsアプリケーションで自分のコンポーネントをスタイリングするためにMuicssを使ってアプリケーションをセットアップしようとしています。React js内のMuicssスタイルの読み込み

以下は非常に簡単な例のコードですが、私がブラウザに行ったときにボタンにはスタイルがなく、何かが欠落しているかどうかわからず、以前にMaterial Designを使用していました。問題。

import React from 'react'; 
import Button from 'muicss/lib/react/button'; 

export default class Example extends React.Component { 
    render() { 
    return (
     <div> 
      <Button variant="raised" color="danger">button</Button> 
     </div> 
    ); 
    } 
} 

誰かが、私は何かが欠けていた場合に得るために私を助けることができる、私はNPMを使用してライブラリをインストールし、私のnode_modulesフォルダ内の私はMuicssライブラリからすべてのファイルを見ることができます。

enter image description here

enter image description here

答えて

0

MUIを使用するには、あなたがMUIを含める必要がありリアクト

コンソールでエラーまたは奇妙な何かがありません、奇妙なことは、コンポーネントが何なスタイルを持っていないということです... HTMLペイロードのCSSファイル。それはあなたのアプリケーションのCSSにコンパイルまたはCDNから追加することができます。

<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" /> 

(ソース:MUICSS documentation

+0

お時間をありがとう、私はちょうど私がHTMLファイルを使用していないよ...もう一つ質問がありますすべてのara js、さらには "home"ページがjsファイルなので、どのようにCSSを追加できますか? cdnの場合、私のネットワークが私に外部ソースに行くことを許可しないとどうなりますか、私はローカルでCSSをダウンロードまたはロードする必要がありますか? – kennechu

+0

Reactレイアウトをレンダリングするdivを1つだけ含んでいても、HTMLファイルのないブラウザでWebページを表示することはできません。 –

+0

はい、ファイルをダウンロードして自分のサーバから提供してください –

関連する問題