タグ付けされた質問 「material-ui」

私はいくつかのコードを書きました： function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } エラーが発生します： JSX要素タイプにElemは構成または呼び出しシグネチャがありません どういう意味ですか？

157 reactjs  typescript  material-ui 

Material-UIで少し遊んでいます。（Bootstrapのように）グリッドレイアウトを作成するためのオプションはありますか？ そうでない場合、この機能を追加する方法は何ですか？ GridListコンポーネントがありますが、それはいくつかの異なる目的を持っていると思います。

118 reactjs  material-design  material-ui  grid-system 

makeStyles()ライフサイクルメソッドを持つコンポーネントで使用しようとすると、次のエラーが発生します。 無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。 Reactとレンダラー（React DOMなど）のバージョンが一致していない可能性があります あなたはフックのルールを破っているかもしれません 同じアプリにReactのコピーが複数ある可能性があります 以下は、このエラーを生成するコードの小さな例です。他の例では、子アイテムにもクラスを割り当てています。MUIのドキュメントには、他の使用方法を示しmakeStyles、ライフサイクルメソッドを使用する機能があるものは何も見つかりません。 import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const classes = …

117 reactjs  material-ui 

css-in-jsメソッドを使用してreactコンポーネントにクラスを追加するには、複数のコンポーネントを追加するにはどうすればよいですか？ クラス変数は次のとおりです。 const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); これが私がそれをどのように使用したかです： return ( <div className={ this.props.classes.container }> 上記は機能しますが、classNamesnpmパッケージを使用せずに両方のクラスを追加する方法はありますか？何かのようなもの： <div className={ this.props.classes.container + this.props.classes.spacious}>

95 css  reactjs  material-design  material-ui  jss 

何らかの理由で、material-uiの日付ピッカーが機能しません。日付ピッカーがReactでレンダリングされるたびに、次のエラーがスローされます。 RangeError：書式文字列にエスケープされていないラテンアルファベット文字が含まれています n 日付ピッカー（https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js）だけでStackblitzを作成しましたが、そこにもエラーが表示されます。何が悪いのですか？私はインストールガイドのすべての指示に従っていたと思います。 material-ui / pickersへのリンク：https : //material-ui-pickers.dev/

19 javascript  reactjs  material-ui  material-ui-pickers 

React Material-UI（ https://material-ui.com/components/autocomplete/）。 デモコードでは、 <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> どのように機能するかはわかりますが、選択した値を取得する方法がわかりません。 たとえば、 onChangeプロップをこれして、選択に基づいていくつかのアクションを実行できるようにします。 追加してみた onChange={v => console.log(v)} ただし、v選択した値に関連するものは何も表示されません。

17 javascript  reactjs  material-ui 

製品版でMERNアプリのLoginコンポーネントにアクセスしようとすると、次のタイプの一連のエラーがこの画像に表示されます。 私のアプリ（https://github.com/ahaq0/kumon_schedule）はローカルで完全に正常に動作し、今日のHerokuでホストされている完全に正常に動作していました。 今日行ったコードの変更をすべてロールバックして、役に立たなかった。同様に、package.json（および.lock）をチェックして、マテリアルUIの依存関係を変更したかどうかを確認しましたが、同じでした。ここでホストされているバージョンで突然動作しなくなった理由を理解できないようです。 エラーの行のコードは以下のとおりです。ただし、マテリアルUIの一部であるため、書きませんでした。 if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) { sheetsRegistry.add(dynamicSheet); } } else { state.classes = sheetManager.staticSheet.classes; } sheetManager.refs += 1; これは私の最初にデプロイしたアプリであり、物事をロールバックする最善の試みにもかかわらず、すべてが機能して機能しなくなったのに途方に暮れています。 編集。エラーログの送信元であるChromeだけでなく、Firefoxでもテストしたことを述べておきます。 ＃2を編集します。さらに多くのデバッグを行った後、Heroku経由でfccc55a5をコミットするようにロールバックするとエラーが発生しないことがわかりました。ただし、そのコミットで新しいブランチを作成し、そのブランチをデプロイしようとすると、機能しません。 こちらを ご覧くださいhttps://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5 Herokuの最後のビルドに戻すと、動作します。しかし、以前のコミットを新しいブランチにマージしてデプロイしようとしても、失敗します。

15 reactjs  typescript  heroku  material-ui  mern 

Autocomplete入力タグにコンポーネントを使用したい。タグを取得して状態に保存しようとしています。後でデータベースに保存できます。反応ではクラスの代わりに関数を使用しています。私はで試しましたがonChange、結果は得られませんでした。 <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

アラートコンポーネントを使用するためにmaterial-ui / labをインストールしましたが、インポートすると次のimport Alert from '@material-ui/lab/Alert';ようになります。コンパイルに失敗し、このエラーがスローされます。 ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. だから私はこの問題をグーグルで調べてmaterial-ui/lab/AutoCompleteコンポーネントに関する別の質問を見つけました（この質問とまったく同じです）、受け入れられた答えはmaterial-ui / coreをバージョン4.9.9に更新することでした、そしてそれは尋ねた人にとってはうまくいったようです、悲しいことに、私にとってはそうではありません。インストールされているすべてのmaterial-uiのこのバージョンがあります。 "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", だから今私はあなたにこの問題を解決する別の方法があるかどうかをみんなに尋ねています、ありがとう

11 javascript  node.js  reactjs  material-ui 

ブラウザでプロジェクトを実行すると、次のエラーが発生しました。 コンパイルに失敗しました： ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Autocompleteコンポーネントを実装しようとしています（「複数の値」セクションの例から）。 これが私が使っているコードです： import React from 'react'; import Chip from '@material-ui/core/Chip'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; <Autocomplete multiple id="tags-standard" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderInput={(params) => ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" /> )} /> …

11 reactjs  typescript  material-ui 

@keyframeを使用してCSSでアニメーションを使用する方法を学びました。しかし、私のカスタムアニメーションコードを自分のreactプロジェクト（materialUIを使用）に書きたいと思います。私の課題は、MaterialUIのmakeStyle（）を使用して、アニメーションをカスタム化するJavaScriptコードをどのように書くことができるかです。今回は、MaterialUIで遷移プロセスをパーセンテージでカスタマイズできるようにしたいと思います。makeStyle（）でこのようなコードを記述できるようにする必要がありますが、その方法がわかりません。 @keyframes myEffect { 0%{ opacity:0; transform: translateY(-200%); } 100% { opacity:1; transform: translateY(0); } } コードスニペットを実行する結果を非表示スニペットを展開

8 css  reactjs  material-ui  jss