Chakra UI Pseudo

Chakra UI, provides a way to style components dynamically using pseudo-classes. pseudo-classes are special styles that you can apply to elements based on their current state or where they are in the component structure. For example, you might want a button to change its color when a user hovers over it. Chakra UI makes this super easy with pseudo-classes. This way, you can add a bit of interactivity and visual appeal to your website without writing a bunch of complex code.

Prerequisites

• NPM (Node Package Manager)
• React
• HTML, CSS & JavaScript
• ReactJS Chakra UI

Approach:

• Import Components: Import Chakra UI components (ChakraProvider, Box, Heading, Text, Button) and React.
• Functional Component: Define a functional component named App.
• ChakraProvider: Used to wrap the components within for Chakra UI styling.
• Box Component: Use Box to create a styled container. Apply “_hover” and “_active” pseudo-classes for dynamic background changes.
• Heading and Text Components: Use Heading and Text for displaying text content. Apply “_before” pseudo-class to add a rocket emoji before the text.
• Button Component: Use Button with a teal color scheme. Apply “_focus” pseudo-class for a focus outline.

Steps To Create React Application and Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app newapp

Step 2: After creating your project folder(i.e. newapp), move to it by using the following command:

cd newapp

Step 3: After creating the React application, Install the Chakra UI package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies in the package.json file.

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: In this example, Chakra UI Components, including ChakraProvider, were used to wrap components for styling.

• The Box component was employed to create a styled container.
• “_hover” pseudo-class was utilized to change the background color to “gray.200” when the cursor hovers over it.
• “_active” pseudo-class was applied to the Box to change the color to “teal.200” when it is clicked.
• Heading and Text components were utilized to create a text container.
• “_before” pseudo-class was used to display a text/icon before the actual text.
• A Button component was employed to create a button with a “teal” color scheme.
• “_focus” pseudo-class was applied to the Button to provide a box shadow “outline” when the button is clicked.

Javascript

import {
    ChakraProvider, Box,
    Heading, Text, Button
}
    from '@chakra-ui/react';
import React from 'react';
import './App.css';

const App = () => {

    return (
        <ChakraProvider>
            <Box
                textAlign="center"
                p={4}
                // Apply styles on hover
                _hover={{ backgroundColor: 'gray.200' }}
                // Apply styles on click
                _active={{ backgroundColor: 'teal.200' }}
            >
                <Heading>Chakra UI Pseudo Example</Heading>
                <Text mt={4} _before={{ content: '"????"' }}>
                    Welcome to Chakra UI Pseudo Code!
                </Text>
                <Button
                    colorScheme="teal"
                    mt={4}
                    // Apply styles when focused
                    _focus={{ boxShadow: 'outline' }}
                >
                    Click me
                </Button>
            </Box>
        </ChakraProvider>
    );
};

export default App;

Step to Run the application:

• Start using the following command.

npm start

Output: