Managing Multiple Styles With Chakra UI V3

When building components with Chakra UI v3, you might need to create similar components with slight variations in styles, such as different background colors. How can you manage these variations efficiently?

Let’s consider a ServerStatus component that represents the running state of a server. A simple version of this component might look like the following:

import { Box } from "@chakra-ui/react";
export const ServerRunningStatus = () => {
  return (
    <Box
      w="200px"
      p={2}
      textAlign="center"
      borderRadius="md"
      bg="green.600"
      color="white"
    >
      Runn...