Chakra UIのボーダー半径の設定方法

1. 内部スタイルの使用: Chakra UIでは、コンポーネントにスタイルを直接適用するためのsxプロップが提供されています。以下の例では、BoxコンポーネントにborderRadiusプロパティを使用して、ボーダーの角を丸くします。

import { Box } from '@chakra-ui/react';
function App() {
  return (
    <Box
      sx={{
        borderRadius: '8px',
      }}
    >
      {/* ここにコンテンツを追加 */}
    </Box>
  );
}

2. スタイルオブジェクトの使用: sxプロップに直接スタイルを記述する代わりに、sxプロップにスタイルオブジェクトを渡すこともできます。以下の例では、borderRadiusプロパティを含むスタイルオブジェクトを使用しています。

import { Box } from '@chakra-ui/react';
function App() {
  const boxStyles = {
    borderRadius: '8px',
  };
  return (
    <Box sx={boxStyles}>
      {/* ここにコンテンツを追加 */}
    </Box>
  );
}

3. テーマの変更: Chakra UIでは、テーマオブジェクトを使用してデフォルトのスタイルを変更できます。以下の例では、テーマオブジェクトにradiiプロパティを追加して、ボーダー半径を設定しています。

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
const theme = extendTheme({
  radii: {
    sm: '4px',
    md: '8px',
    lg: '12px',
  },
});
function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box borderRadius="md">
        {/* ここにコンテンツを追加 */}
      </Box>
    </ChakraProvider>
  );
}

以上が、Chakra UIでボーダー半径を設定する方法といくつかのコード例です。これらの方法を使用して、柔軟で魅力的なデザインを実現しましょう。