2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

記事投稿キャンペーン 「2024年!初アウトプットをしよう」

Qwikで子コンポーネントにもScopedなstyleを継承させる方法

Posted at

QwikのuseStylesScoped$はコンポーネント内で局所的に閉じたスタイルを適用できて便利なのですが、そのまま使うと子コンポーネントにはスタイルが適用されず、最初は<Link>が言う事を聞かなくて難儀したりします。
正しく子コンポーネントにもスタイルを継承させるには明示的に以下のようにscopeIdを指定する必要があります。

const {scopeId} = useStyleScoped$(styles);
...
return (
  ...
  <Link class={scopeId}>

若干面倒なので以下のようなQrl関数を用意しておくと、

export const useStyledQrl = (styles:QRL<string>) => {
  const {scopeId} = useStylesScopedQrl(styles);
  return {class:scopeId};
};
export const useStyled$ = implicit$FirstArg(useStyledQrl);

こんなふうにシンプルに記述できるようになります。

const styled = useStyled$(styles);
...
return (
  ...
  <Link {...styled}>
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?