問題タブ [class-names]
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: classnames ライブラリを使用した条件付きクラス名が効果を発揮しない
classnames npm ライブラリを使用して条件付きでクラス名をレンダリングしようとしていますが、DOM ではそれらが追加されているように見えますが、それらのクラスの背後にある CSS 効果を確認できません。私は主に境界線を条件付きで変更しようとしています。
以下は、useStyles の CSS に関連するクラスです。
以下では、クラス名のステータスを設定する条件を設定し、コードでそれらを使用しようとしています (短いスニペット):
DOM では、クラス名が正しく識別されていることに気付きましたが、残念ながらこれらのクラスは効果がありません。
next.js - next.js で npm classnames ライブラリを使用して、必要に応じて css ファイルからスタイルを適用するにはどうすればよいですか?
以下の html では、オプションで、message.error または message.info に応じて、ブートストラップ クラス、alert-danger または alert-primary を適用しています。ターゲット クラスはブートストラップ クラスであり、期待どおりに動作します。
ここで、alert-danger の代わりに、css ファイル $(styles.activeDiv) からスタイルを適用したいと考えています (message.error が true の場合)。つまり、alert-danger を $(styles.activeDiv) に置き換えたいと考えています。これを行うにはどうすればよいですか。
css - Gatsby と Classnames ライブラリ: div の内容に応じて CSS クラスを適用する
ブログ付きの Gatsby プロジェクトがあります。ブログ投稿のタグを表示するタグ クラウド セクションがあります。タグクラウドの対応するタグと同じスタイルにしたい実際のブログポストカードにもボタン/ヘッダーがあります。つまり、タグクラウドに「プレスリリース」の赤いタグがある場合、すべてのブログ投稿のスタイルを設定したいプレス リリースに関するカードには赤いボタンを付け、タグ クラウドに「はじめに」の青いタグがある場合は、「はじめに」のタグが付いたすべてのブログ ポスト カードを青にスタイルしたいと考えています。
ブログのポストカードのスタイルを設定する PostCard コンポーネントがあります。次のように、クラス名ライブラリを使用して、タグの値に応じて CSS スタイルを適用しています。
上記のコードは、タグのデフォルト スタイルをpostCardTags(私は青に設定しました) に設定し、値が "Press Release" のタグを赤に設定します。
これをローカルで実行するとlocalhost:8000/、スタイルが正しく適用され、「プレスリリース」タグが正しく赤に設定されます。本番環境にプッシュすると、値が「プレス リリース」のタグが CSS クラスに正しく設定されずtagStyles.red、青色になります。プロジェクトがローカルで実行されると何らかの理由tagStyles.redで「プレスリリース」タグが設定されますが、本番環境にプッシュされると「プレスリリース」タグは青色に設定されます (つまりstyles.postCardTags)。
「プレス リリース」タグをtagStyles.tagRedオンにするとスタイルが適用されるのに、ライブ サイトにプッシュするとlocalhostクラスが適用されるのはなぜですか? styles.postCardTagsこれは、Gatsby がコンポーネントを構築する方法に問題がありますか?
typescript - オブジェクトキーが条件付き再帰テンプレート型に準拠しているかどうかをチェックする方法は?
質問は例で理解しやすいです。https://npmjs.com/package/classnamesの厳密に型保護されたラッパーを実現して、アプリが使用する Tailwind クラス名を型チェックしたいと思います。
これまでのところ、最も近い解決策は次の例です。
ここで入手可能なサンプルコード: Playground リンク
これは機能しますが、エラーはオブジェクトの特定のキーに関連付けられているのではなく、すべてのオブジェクト キーに関連付けられています。TypeScript は"block h-1"、同じエラーがあることも強調表示します: Type 'boolean' is not assignable to type 'never'..
「bad-class」キーのみが無効な Tailwind クラス文字列であることを TS が検出できるが、「ブロック h-1」が無効として強調表示されないようにするには、どのようにタイピングを行うことができますか?