@nekihcom (Masaya Kemmochi)posted at 2023-11-09

Chakra-UIのfontSizeに"xl"や"sm"を指定しても文字サイズが変わらない

Q&A

Closed

解決したいこと

Chakra-UIのTextコンポーネントのfontSizeに"xl"や"sm"を指定しても文字サイズが変わらない。
"18px"や"32px"など絶対値を指定すると文字サイズは変わる。
"xl"や"sm"など相対的なサイズを指定して文字サイズを変えられるようにしたい。

発生している問題・エラー

// 文字サイズ変わる
<Text color="#B83280" fontSize="32px" as="b">Hello, World!</Text>

// 文字サイズ変らない
<Text color="#B83280" fontSize="md" as="b">Hello, World!</Text>

自分で試したこと

fontSizeのpropsを囲むダブルクォーテーションをシングルクォーテーションに変えてみた
→解消せず
「chakra fontsize md not change」などで同様の事例をググってみた
→解消した事例は見つからず

ご教授お願いいたします。

1Answer

@heesukim998 posted at 2023-11-09

もし、Reactのindex.tsxでProviderを提供していますか？
提供してないのが原因かもしれません。

import { ThemeProvider } from "@chakra-ui/core"

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <ThemeProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ThemeProvider>
);

0Like

Comments

@nekihcom

Questioner

ご回答ありがとうございます

ChakraProviderをインポートしていないことが原因でした

import { ChakraProvider } from '@chakra-ui/react'; //Add

// ・・・・

root.render(
    <ChakraProvider>
        <React.StrictMode>
            <Counter />
        </React.StrictMode>
    </ChakraProvider>
);

Are you sure you want to delete the question?