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}>