7

React Starter Kitを使用して、次のようにMaterial UIを追加します。

npm install material-ui --save

コンポーネントへの次のインポート:

import RaisedButton from 'material-ui/lib/raised-button';

と：

<RaisedButton label="Default" />

次のエラーが表示されます。

警告: Material-UI: userAgent は、サーバー側レンダリング用の muiTheme コンテキストで提供する必要があります。

Material UI のドキュメントによると、次の 3 つのことに対処する必要があると書かれています。

  1. autoprefixer とユーザー エージェント
  2. process.env.NODE_ENV

具体的には、React Starter Kit を使用して、どのコードをどこに配置すればよいですか?

PSこのソリューションは私には機能しません:-/

4

6 に答える 6

6

サーバー レンダリングで Material-UI を使用する場合、サーバーとクライアントに同じ環境を使用する必要があります。これには 2 つの技術的な意味があります。

MaterialUIのドキュメントページで見たように

ドキュメントで見たように、サーバー コンテキストとブラウザ コンテキストの両方に同じユーザー エージェントを提供する必要がありますが、「すべて」のユーザー エージェントを提供することは強くお勧めしません。 -ユーザー。

代わりに、MaterialUI doc に従い、 http リクエスト ヘッダーに含まれるユーザー エージェント値を簡単に渡すことができます。

Express または koaサーバーを使用する場合

global.navigator = global.navigator || {};
global.navigator.userAgent = req.headers['user-agent'] || 'all';

ReactStarterKit に追加されていることを確認しました(自分でテストしていません)。src/server.js

global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';
于 2016-06-29T13:10:18.107 に答える
4

これは私にとってはうまくいきます。これを に追加server.js:

global.navigator = { userAgent: 'all' };

-webkit次に、このスクリーングラブのように複数のベンダー プレフィックスが使用され、-ms両方が使用されていることを確認します。

ここに画像の説明を入力

于 2016-02-20T23:40:20.287 に答える
4

これで修正されるはずです 

import themeDecorator from 'material-ui/lib/styles/theme-decorator';
import RaisedButton from 'material-ui/lib/raised-button';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

class MyComponent extends Component {
 render() {
   return (<RaisedButton label="Default" />);
  }
}

export default themeDecorator(getMuiTheme(null, { userAgent: 'all' }))(MyComponent);
于 2016-02-19T07:54:00.277 に答える
3

私にとって有効な（そして最もクリーンな）解決策は短くて簡単です：

getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })

例（私のテストアプリから）：

<MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
    <Provider store={store}>
        <MyApplication/>
    </Provider>
</MuiThemeProvider>
于 2016-08-23T17:08:00.617 に答える
3

ファイルの先頭 (Node.js エントリ ポイント)に追加global.navigator = { userAgent: 'all' };してみてください。server.js

于 2016-02-18T12:47:08.610 に答える
0

KoaJS サーバーを使用している場合は、koa- useragent をインストールしてから、サーバー側のレンダリングの前にこれを使用する必要があります。

  global.navigator = global.navigator || {};
  global.navigator.userAgent = this.state.userAgent.source || 'all';

それは私のために働いた！

于 2016-07-17T15:59:07.553 に答える