'Just like in Material UI where I can create a style using styled, how can I create a component with my custom styles and use it in different places?

import { Box, Flex, Container } from "@chakra-ui/react";
import type { NextPage } from "next";
import { Image } from "@chakra-ui/react";
import React from "react";

const Header: NextPage = () => {
  return (
    <>
      <Flex
        color="white"
        height="2.5rem"
        justifyContent="flex-end"
        alignItems="center"
      >
        <Container
          border="1px solid black"
          color="#4C5161"
          borderRight="1px solid black"
          borderLeft="1px solid black"
          padding="0.7rem"
        >
          Help Center
        </Container>
        <Container
          color="#4C5161"
          borderRight="0.5px solid black"
          borderLeft="0.5px solid black"
          padding="0.7rem"
        >
          Branch Office
        </Container>
        <Container
          color="#4C5161"
          borderRight="0.5px solid black"
          borderLeft="0.5px solid black"
          padding="0.6rem"
        >
          Unit Converter
        </Container>
        <Container
          color="#4C5161"
          borderRight="0.5px solid grey"
          borderLeft="0.5px solid black"
          px="1rem"
          py="0.5rem"
        >
          Home Loan
        </Container>
        <Container
          color="#4C5161"
          borderRight="0.5px solid black"
          borderLeft="0.5px solid black"
          padding="0.7rem"
        >
          Login
        </Container>
        <Container
          color="#4C5161"
          borderRight="0.5px solid black"
          borderLeft="0.5px solid black"
          padding="0.7rem"
        >
          Sign Up
        </Container>
        <Box paddingLeft="5rem" />
      </Flex>
    </>
  );
};

export default Header;

Here all my 5 "Container" component is using the similar styles, how can I create a custom container component with my styles and use it in all places of these container so I don't have to write css properties to each of them? I could make a single component with styles with MUI using styled(). How can I do it in chakraUI?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source