'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 |
|---|
