chakra-uiの `<Link>` コンポーネントに親の文字色が適用されない

はじめに

• chakra-uiのスタイリング

問題

• <Link>はcss-1nqikryにcolorが適用されてしまい、親要素の文字色が反映されなかった。<Box>に変えると意図どおり親要素の文字色が反映される

<a class="chakra-link css-1nqikry">設定</a>

.css-1nqikry {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    outline: none;
    gap: var(--chakra-spacing-1\.5);
    cursor: pointer;
    border-radius: var(--chakra-radii-l1);
    --focus-ring-color: var(--chakra-colors-color-palette-focus-ring);
    color: var(--chakra-colors-color-palette-fg);
}

解決

• デフォルトで文字色が付くようなので、明示的にcolorをinnheritにして解決

終わりに