React で Chakra UI を始める: 完全ガイド

   import React from 'react';
   import { ChakraProvider, Button } from '@chakra-ui/react';

   function App() {
     return (
       <ChakraProvider>
         <div>



<p>In this example, we import ChakraProvider to provide the default theme and use the Button component from Chakra UI.</p>

<ol>
<li>
<strong>Customizing the Theme</strong>:</li>
</ol>

<p>Chakra UI’s default theme can be easily customized using the extendTheme function. You can change the colors, fonts, and other aspects of the theme globally.</p>

<p>Example of customizing the theme:<br>
</p>

<pre class="brush:php;toolbar:false">   import React from 'react';
   import { ChakraProvider, Button, extendTheme } from '@chakra-ui/react';

   // Customize the default theme
   const theme = extendTheme({
     colors: {
       brand: {
         100: '#e6fffa',
         200: '#b2f5ea',
         300: '#81e6d9',
         400: '#4fd1c5',
         500: '#38b2ac',
         600: '#319795',
         700: '#2c7a7b',
         800: '#285e61',
         900: '#234e52',
       },
     },
   });

   function App() {
     return (
       <ChakraProvider theme={theme}>
         <div>



<p>In this example, we extend the default theme with custom brand colors and use them in the Button component.</p>

<ol>
<li>
<strong>Responsive Design with Chakra UI</strong>:</li>
</ol>

<p>Chakra UI provides a responsive design system that makes it easy to build mobile-friendly layouts. You can use Chakra’s responsive utilities like useBreakpointValue to display different content based on screen size.</p>

<p>Example of responsive design:<br>
</p>

<pre class="brush:php;toolbar:false">   import React from 'react';
   import { Box, useBreakpointValue } from '@chakra-ui/react';

   function App() {
     // Dynamically change the background color based on screen size
     const bgColor = useBreakpointValue({ base: 'teal.100', md: 'purple.100' });

     return (
       <Box bg={bgColor} height="100vh">
         <h1>Hello, Chakra UI</h1>
       </Box>
     );
   }

   export default App;