問題タブ [react-flexbox-grid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - material-ui-nextでmaterial-uiアプリバーを使用して右または左にフロートする正しい方法は何ですか?
material-ui-next ("material-ui": "^1.0.0-beta.22", )
彼らiconElementRight=はAPIから削除されたようです。<Grid>アプリバーで nowを使用する必要がありますか? ゴツゴツした感じです。appbar でボタン (ログインなど) をフロートさせる正しい方法は何ですか?
css - 下部のマテリアル UI にカード ボタンを配置する
私は ReactJS でアプリを開発しており、MaterialUI (react 用) と React Flexbox を使用しています。
私が抱えている問題は、カードボタンを下に配置しようとすることです (さまざまなフレームワークでインターネットをスパムしたように見える問題)。ここからカードを使用しています -> https://material-ui.com/demos/cards/
align-items から align-self やさまざまな表示タイプまで、考えられるほとんどすべてを試しました。私は通常 Bootstrap を使用しているため、ここで何かが欠けている可能性があるため、CSS マスターが私を助けてくれることを願っています。参考までに下の写真を添付します。
また、refについては、コードがreactでどのように見えるかを示します（ApiPostsは私のカードコンポーネントです）->
そして最後に、私のカードは<Row around="xs">(行に 4 つの投稿) でラップされ、各カードは col に<Col xs >
前もって感謝します！
編集：Ivanの回答のおかげで解決しました。とにかく必要な場合のコードを次に示します（Material-UI Cardsで作業しています）。
portCardCl最初<Card>にportBodyCl進み、進み<CardActionArea>、最後にportButCl進みます<CardActions>
css - この種のレイアウトは、flexbox または react-css-grid で可能ですか?
反応プロジェクトを開始しようとしていますが、レイアウトが少し複雑で、レスポンシブである必要があります。
私は何をする必要があるかの大まかな図をペイントで描き、達成するのが難しいと感じている場所に印を付けました.
そのようなレイアウトが、flexbox や react-css-grid などの反応で達成できるかどうか教えていただけますか?? これを説明するチュートリアルまたは記事へのリンクがあれば、それは非常に役に立ちます。
画像はこちら
javascript - React-flexbox-grid: Prop `className` がクライアントとサーバーの間で一致しませんでした
Next.js内で sass とともにreact-flexbox-grid を構成する場合。この課題に直面しています。
latest: を使用して作成されたプロジェクトcreate-next-appで、カスタム変更はありません.babelrc
エラー
index.js:2178 警告: プロップ
classNameが一致しませんでした。サーバー: "col-xs-12 col-md-4 col-lg-2" クライアント: "col-xs-12__flexboxgrid2__AdoKE col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt"
Sass の設定は次のようになります。
もう少し:
上記の sass 構成内に含めたり除外したりしようとしflexboxgridましたが、まだ運がありません。
localIdentName:[local]長い調査の結果、クライアントとサーバーのレンダリングの両方に一致するように、をオーバーライドすることで問題を解決できました。残念ながら、私が使用する場合: localIdentName: '[local]__[name]__[hash:base64:5]'、クライアントが使用しているため失敗します: localIdentName:[local]。では、どのように、どこで like をオーバーライドできますclientIdentNameか? で何かをする必要があり.babelrcますか?