問題タブ [css-in-js]

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.

0 投票する
13 に答える
113557 参照

javascript - JavaScript からの CSS 擬似クラス ルールの設定

JavaScript から擬似クラス セレクター (:link、:hover など) の CSS ルールを変更する方法を探しています。

したがって、CSS コードの類似物: a:hover { color: red }JS で。

他のどこにも答えはありませんでした。これがブラウザでサポートされていないことを誰かが知っていれば、それも有益な結果になります。

0 投票する
1 に答える
1271 参照

stylelint - 同じファイル内の異なるセレクターの no-duplicate-selectors エラー

CSS-IN-JS プロジェクト内で stylelint を使用しています (ここでは astroturf を使用していますが、styled-components などの CSS-IN-JS ライブラリを使用しても同じパターンに直面しています)。

同じファイル内で異なるスタイルの要素を定義しているため、セレクタやインポート ルールが重複することがあります。

私はこのように構成します:

これらの stylelint ルールをファイル全体ではなくブロックに設定する方法はありますか?

0 投票する
1 に答える
714 参照

javascript - CSS-in-JS はブラウザの CSS キャッシュを妨げませんか?

サーバーサイド レンダリングを使用して React アプリのスタイルを設定するためのベスト プラクティスを探しています。

SASS などのプリプロセッサを使用したり、JSS や styled-components などの JS コード内にスタイリングを配置したりするなど、さまざまなオプションがあります。

JSS をいじってみると、スタイルが HTML 内の head セクションに配置されていることがわかります。次の例を使用して、動作を確認します。

https://github.com/cssinjs/examples/tree/gh-pages/react-ssr

ブラウザが CSS をキャッシュして head セクション内に配置するのを防ぎ、連続するページの読み込み時間を増加させませんか? ブラウザーがキャッシュできるように、JSS を使用して外部ファイルにスタイルを設定する方法はありますか?