Moondancer83/useStyle

Hooks for @material-ui/styles

Adding useStyles hook for Material-UI Styles

Motivation

Material UI has a hook creation mechanism that allow users creating JSS based styling. However the syntax has more complexity than it should.

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({root: {color: "red"}})

function ComponentWithStyles() {
  let classes = useStyles();

  return <div className={classes.root}/>; // className: makeStyles-root-1-1
}

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useNamedStyles = makeStyles({root: {color: "red"}}, {classNamePrefix: "Test})

function ComponentWithNamedStyles() {
  let classes = useNamedStyles("Test2", {root: {color: "red"}});

  return <div className={classes.root}/>; // className: Test2-root-1-1
}

Install

inpm i react-use-styles

Usage

import React from "react";
import { useStyles, useNamedStyles } from "./useStyles";

function ComponentWithStyles() {
  let classes = useStyles({root: {color: "red"}});

  return <div className={classes.root}/>; // className: makeStyles-root-1-1
}

function ComponentWithNamedStyles() {
  let classes = useNamedStyles("Test2", {root: {color: "red"}});

  return <div className={classes.root}/>; // className: Test2-root-1-1
}