# GRUZF UI Styles

This library is designed to style React components for the Gruzovichkof company.

> GRUZF UI Styles is written in `typescript` and built on the [tss-react](https://github.com/garronej/tss-react), [Emotion](https://emotion.sh/) and [Material UI](https://material-ui.com/) libraries

## Install

```bash
npm install @gruzf/styles
```

or

```bash
yarn add @gruzf/styles
```

## Usage

```js
import makeStyles from "@gruzf/styles";
import CacheProvider from "@gruzf/styles/CacheProvider";
import { ThemeProvider } from "@mui/material/styles";

const PADDING = 12;

const useStyles = makeStyles()((theme, props) => ({
  h1: {
    color: theme.palette.primary.main,
    borderBottom: `2px solid ${theme.palette.secondary.main}`,
    paddingTop: props.paddingTop,
  },
  green: {
    color: "green",
  },
}));

// or import { defaultTheme } from '@gruzf/styles';
const theme = createTheme({
  palette: {
    primary: {
      main: "red",
    },
  },
});

function HelloWorld({ green }) {
  // you can pass anything props to styles
  const { classes, cx } = useStyles({ paddingTop: PADDING });

  return (
    <h1 className={cx(classes.h1, green && classes.green)}>Hello World!</h1>
  );
}

function App() {
  return (
    <CacheProvider>
      <ThemeProvider theme={theme}>
        <HelloWorld green />
      </ThemeProvider>
    </CacheProvider>
  );
}
```

## NextJS implementation

### Create \_document.js file

```js
import createDocument from "../utils/createDocument";

export default createDocument(options);
```

#### Options

##### Document

- Type: `NextJS Document`
- Default: `undefined`