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.

⚠️

Please note that the css API does not currently support interpolations in the same way as libraries like Emotion does. However, we are actively working to incorporate this feature, so stay tuned for updates.

Import

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

Usage

hello world

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.

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.

styled k