@20i/react-css-classes

@20i/react-css-classes

Using a MUI theme, provides a lot of CSS classes to make writing React components quicker!

Peer Deps

"@material-ui/core": "^4.9.0"
"@material-ui/styles": "^4.9.0"

Init

// filename: style.ts

import { createMuiTheme } from "@material-ui/core/styles"
import { useClasses } from "@20i/react-css-classes"

export const theme = createMuiTheme({
    // typography,
    // palette,
    // breakpoints,
    // spacing,
    // overrides,
    // props
})

// export the hook!
export const useReactCSSClasses = useClasses(theme)

Usage in a react component

import { useReactCSSClasses } from "style"
import React from "react"

const MyReactComponent = () => {
    const rc = useReactCSSClasses()

    // use whatever classes you want. There's a ton!!
    const className = rc.bgPrimaryDark

    return (
        <div className={className}>
            This is my component
        </div>
    )
}

CSS Classes

There's a lot of helper CSS classes. You can view them by category.

Animation Border Color Flex Handy MarginPadding Opacity Positional Shadow TextAlignment Transform