css

Kuma UI's css function allows you to define styles using tagged template literals, generating a unique className that you can apply to your components. This syntax is similar to the one used with the styled API, making it a familiar choice for developers.

Import

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

Usage

export const ThisIsTheCSS = () => {
  return (
    <div
      className={css`
        color: white;
        padding: 8px;
        background: blue;
      `}
    >
      hello world
    </div>
  );
};

In this example, the css function defines a set of styles, generating a className that we then apply to the div component.

Use cx to Combine Multiple Sets of Styles

You can use cx to merge multiple style declarations. This is particularly useful for conditional css declarations or when importing and combining different style sets.

import { css, cx } from "@kuma-ui/core";
import { resetStyles } from "../my-theme";
 
export const ThisIsTheCSS = () => {
  const isLoggedIn = true;
 
  return (
    <div
      className={cx(
        resetStyles,
        css`
          color: white;
          padding: 8px;
          background: blue;
        `,
        isLoggedIn &&
          css`
            color: red;
          `,
      )}
    >
      hello world
    </div>
  );
};

Using Theme Tokens

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

<div
  className={css`
    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.

Handling Dynamic Styles

While Kuma UI supports dynamic values for styled props like the one shown below, they are processed at runtime and hence might not be as performance-friendly:

const [isPressed, setPressed] = useState(false);
const onClick = () => setPressed(true);
 
return <Box color={isPressed ? "red" : "blue"}></Box>;

For better performance, we recommend defining your dynamic styles with the css API like so:

const [isPressed, setPressed] = useState(false);
const onClick = () => setPressed(true);
 
return (
  <Box
    className={
      isPressed
        ? css`
            color: red;
          `
        : css`
            color: blue;
          `
    }
  ></Box>
);

In this case, the styles are generated statically at build time, which is more performance-friendly. Thus, you can use the css API to handle both static and dynamic styles efficiently.