mantine-stylex

Write styles in your application using StyleX and easily reference Mantine design system variables in a type-safe manner.

Installation

pnpm add -D mantine-stylex

Learn more about thinking in StyleX and how to install it in your project.

Usage

Create a Mantine theme file:

// src/styles/theme.ts
import { createTheme } from "@mantine/core";

const theme = createTheme({
  colors: {
    brand: [
      "#e6f7ff",
      "#bae7ff",
      "#91d5ff",
      "#69c0ff",
      "#40a9ff",
      "#1890ff",
      "#096dd9",
      "#0050b3",
      "#003a8c",
      "#002766",
    ],
  },
  // ...
});

Generate a module that exports StyleX constants:

pnpx mantine-stylex src/styles/theme.ts -o src/styles/vars.stylex.ts

The generated module will contain exports that allow Mantine variables to be used in a type-safe manner when defining styles:

// src/styles/mantine.stylex.ts
export const colors = stylex.defineConsts({
  text: "var(--mantine-color-text)",
  // ...
});

Use the StyleX constants in your application:

// src/Welcome/Welcome.tsx
import { Title } from "@mantine/core";
import * as stylex from "@stylexjs/stylex";
import { colors } from "@/styles/mantine.stylex";

export function Welcome() {
  return <Title {...stylex.props(styles.title)}>Welcome</Title>;
}

const styles = stylex.create({
  title: {
    color: colors.text,
    fontWeight: 900,
  },
});

License

MIT