みなさんこんにちは、
当サイトのマスタートーテムコンポーネント内のいくつかのスタイルに対して、ごく小さな通常通りの編集を行っています。これにより、リモートスタイルをフォークしたり編集したりする必要がなくなり、次のアップデートで編集内容が上書きされてしまう心配もありません。これまでの編集は「いいね」ボタンの変更など、全般的なものでした。
テーマコンポーネント内の特定のスタイルのみを、他のスタイルに影響を与えずにターゲット指定することは可能でしょうか？データ変数などを通じて可能でしょうか？
これほど小さな変更のために、別のテーマコンポーネントを作成したくありません。すべての編集を一つのテーマコンポーネントにまとめるという考えが好きです。
はい、通常は CSS 内の特異度に頼ることができます。CSS に不慣れな場合でも、基本的には「同じ要素をターゲットにするスタイルが複数ある場合、より特異度が高いスタイルが優先される」ということです。
<div class="custom-container">
<a class="custom-link">link here</a>
</div>
したがって、変更しようとしているコンポーネント内の要素（または親要素）に、どこかに一意のクラスがあるかどうかを確認する必要があります。例えば以下のようなものです。
上記の例では、.custom-link 自体が該当します。もし要素に直接クラスがない場合は、親要素を利用した .custom-container a のような指定が有効です。コンポーネントのスタイルが元々 .custom-link として定義されている場合、a.custom-link とより具体的にターゲットを指定することで上書きできます。
もしコンポーネント内に一意のクラスが見つからない場合は、プラグイン outlets コンテナを使用することも可能です。カスタマイズでプラグイン outlet が使用されている場合、そのコンテナにはカスタムクラスが追加されます。再びリンクのスタイリングを例に取ると、.above-site-header-outlet.brand-header a のような指定が考えられます。ここで「brand-header」はコンポーネントから追加されたテンプレート名です。
それでも難しい場合は、コンポーネントを作成した人に、必要な部分を簡単にスタイリングできるようにクラスを追加してもらうよう依頼することもできます。
もしこの説明がわかりにくい場合は、スタイリングしようとしているコンポーネントからの具体的な例を教えていただくと、よりお手伝いしやすくなります。
ありがとうございます。非常に役立ちました。
例を挙げますと、Graceful のインスタンスを導入しています。Graceful Theme これは以前のアプローチの続編としてあなたが公開したものだと今になって気づきました。
私のユニバーサルテーマコンポーネントでは、背景アセットのアップロード、いいねボタンの変更、その他いくつかの作業を行ってきました。しかし、ダークパレットを使用しているものだけを任意の色に変更し、ライトパレットを使用しているものには影響を与えないようにしたいと気づきました。
正確にはこれです：
background-color: $primary-very-low;
できれば、技術的には同じスタイルであるため、一つのテーマコンポーネントでできる限りのことを行いたいと考えています。しかし、ユニバーサルな変更ではないこのような小さな問題が発生し始めました。可能であれば、「Dark」コンポーネントと「Light」コンポーネントを別々に作成したくありません。
ここでの目標は、パレットの変更を除いて Graceful には手を加えず、すべての作業を独自のコンポーネントから行うことです。そうすれば、あなたや他の誰かが更新をプッシュしても、編集を繰り返し適用する必要がなくなります。
Discourse が変数を多用していることに気づきました。これは素晴らしいことです。テーマ化ガイドを読み進めるのは楽しかったです。[data-topic-id="117"] のようなものも存在することを確認しました。もしかすると [data-theme-id] のようなものを提案できるかもしれません。
@awesomerobot 混乱を招かないよう付け加えますと、まだ別のボードから大規模なボードの移行作業中なので、完全なテーマのことを「スタイル」と呼ぶ習慣が残っています。ただ、ここでの「スタイル」は「テーマ」を指しています。すみません！