@20i/react-css-classes 中文文档教程

Question

@20i/react-css-classes

使用 MUI 主题，提供大量 CSS 类，使编写 React 组件更快！

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

有很多辅助 CSS 类。 您可以按类别查看它们。

动画 边框 颜色 弹性 方便 边距填充 不透明度 位置 阴影 文本对齐 转换