@mantine/styles

What is @mantine/styles?

@mantine/styles is a utility package for styling React components. It provides a set of tools to create and manage styles in a consistent and scalable way. The package includes features like theming, CSS-in-JS, and utility functions for handling styles.

What are @mantine/styles's main functionalities?

Theming

Theming allows you to define a consistent look and feel across your application. You can set global styles, color schemes, and other design tokens.

import { MantineProvider } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={{ colorScheme: 'dark' }}>
      <YourComponent />
    </MantineProvider>
  );
}

CSS-in-JS

CSS-in-JS allows you to write CSS directly within your JavaScript code. This approach helps in scoping styles to components and leveraging JavaScript's capabilities for dynamic styling.

import { createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  button: {
    backgroundColor: theme.colors.blue[6],
    color: theme.white,
    '&:hover': {
      backgroundColor: theme.colors.blue[7],
    },
  },
}));

function YourComponent() {
  const { classes } = useStyles();
  return <button className={classes.button}>Click me</button>;
}

Utility Functions

Utility functions provide additional capabilities for managing styles. For example, `getStylesRef` can be used to create references to styles that can be reused across different components.

import { getStylesRef } from '@mantine/core';

const ref = getStylesRef('my-element');

const useStyles = createStyles((theme) => ({
  [ref]: {
    color: theme.colors.red[6],
  },
}));

function YourComponent() {
  const { classes } = useStyles();
  return <div className={classes[ref]}>Styled element</div>;
}

Other packages similar to @mantine/styles

styled-components

styled-components is a popular CSS-in-JS library that allows you to write plain CSS in your JavaScript. It provides a way to style React components with tagged template literals. Compared to @mantine/styles, styled-components is more focused on providing a seamless CSS-in-JS experience without built-in theming support.

emotion

Emotion is another CSS-in-JS library that offers both string and object styles. It provides powerful and flexible styling capabilities with a focus on performance. Emotion also supports theming, similar to @mantine/styles, but it is more modular and can be used with various frameworks beyond React.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. Unlike @mantine/styles, which focuses on CSS-in-JS and theming, Tailwind CSS emphasizes utility classes and a different approach to styling by composing classes directly in the markup.

README

Mantine styles

Mantine CSS-in-JS library built on top of emotion

View documentation

Installation

# With yarn
yarn add @mantine/styles

# With npm
npm install @mantine/styles

License

MIT