@saunos/restyle-mantine

@saunos/restyle-mantine

@saunos/restyle-mantine is a library that provides jsx transform to expose css prop from Restyle for Mantine components.

Features

• 🎨 Use ReStyle's css prop with Mantine components
• 🚀 Add Mantine theme as a css prop parameter

Installation

npm install @saunos/restyle-mantine restyle @mantine/core

Setup

• Update your tsconfig.json to use the custom JSX transform:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@saunos/restyle-mantine"
  }
}

• If you prefer per-file configuration, add this comment at the top of your .tsx files:

/** @jsxImportSource @saunos/restyle-mantine */

Usage

Here's a basic example of how to use @saunos/restyle-mantine:

import React from 'react';
import { Button, Text } from '@mantine/core';

function App() {
  return (
    <div>
      <Button
        css={(theme) => ({
          backgroundColor: theme.colors.primary,
          marginBottom: theme.spacing.m,
        })}
      >
        Styled Button
      </Button>
      <Text
        css={{
          fontSize: 18,
        }}
      >
        Styled Text
      </Text>
    </div>
  );
}

API Reference

css prop

Please refer to Restyle's docs for more details.

css with callback function

theme: MantineTheme is passed as an argument to the callback function.

<Button
  css={(theme) => ({
    backgroundColor: theme.colors.primary,
    padding: theme.spacing.m,
  })}
>
  Click me
</Button>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.