Styled

Kuma UI's styled API allows you to create styled React components using tagged template literals. This makes it a familiar and comfortable choice for developers who have worked with libraries like styled-components or Emotion.

Import

import { styled } from "@kuma-ui/core";

Usage

export const ThisIsStyledComponent = styled.div`
  padding: 8px;
  color: white;
  background: black;
  @media (max-width: 500px) {
    color: blue;
  }
`;
 
// Then use it like so:
const Component = () => (
  <ThisIsStyledComponent>hello world</ThisIsStyledComponent>
);

In this example, we define a styled component ThisIsStyledComponent that changes the color of the text based on the viewport width. When the viewport width drops below 500px, the text color changes to blue.

Syntax

You can also call styled as a function, passing the name of any intrinsic element type to it. The above is equivalent to:

export const ThisIsStyledComponent = styled('div')`
  padding: 8px;
  color: white;
  background: black;
  @media (max-width: 500px) {
    color: blue;
  }
`;

Extending styles

You can pass a styled component to the styled function to extend styles:

const GreenButton = styled.button`
  background: green;
`;
 
const GreenButtonWithRedText = styled(GreenButton)`
  color: red;
`;

Configuring and Using Breakpoints

The styled API also accepts shared media query breakpoints defined in your Kuma configuration (kuma.config.ts). For instance, if you have the following configuration:

export default createTheme({
  breakpoints: {
    sm: "500px",
    md: "700px",
  },
});

You can use these breakpoints in your styled components like so:

export const ThisIsStyledComponent = styled.div`
  display: flex;
  flex-direction: row;
  @media (max-width: sm) {
    flex-direction: column;
  }
`;

In the above example, the flex-direction changes to column when the viewport width falls below the 'sm' breakpoint value defined in the configuration. Thus, you can leverage the power of these shared media query breakpoints to write more maintainable and consistent media queries in your styles.

Using Theme Tokens

You can also utilize theme tokens directly within your styled function. This allows for a more cohesive and centralized way to manage your design values. Here's how you can use it:

export const ColorComponent = styled.div`
  color: t("colors.primary");
`;

In the above example, t("colors.primary") fetches the primary color defined in your theme tokens, making it easier to maintain a consistent design across your application.