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, Emotion and Material UI libraries

Install

npm install @gruzf/styles

or

yarn add @gruzf/styles

Usage

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

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

export default createDocument(options);

Options

Document

• Type: NextJS Document
• Default: undefined