petty-css-js

介绍

petty-css-js 是精简版的 css-in-js 库，包大小在 5kb 左右。内置提供了 css 和 keyframe 方法操作样式和动画；默认会根据样式内容自动生成元素类名 class，如果需要自定义类名，请在第二个参数配置即可，例如: css("color: red;", "custom-name")

📦 安装

npm install petty-css-js --save

yarn add petty-css-js

🔨 css 示例

  import { css } from "petty-css-js";
  const App = () => {
    const pNames = css(`
      color: red;
    `); // pNames 值为 cIpwMY
    const cNames = css(`
      color: red;
    `, 'childs'); // 自定义类名 cNames 值为 'childs'
    return (
      <div className={pNames} >
        <span className={cNames}>children</span>
      </div>
    )
  }

🔨 keyframe 示例

  import { keyframe } from "petty-css-js";
  const App = () => {
    const pKeyframe = keyframe(`
      from {left:0px;}
      to {left:200px;}
    `); // pKeyframe 值为 dGBNqW
    const cKeyframe = keyframe(`
      from {left:0px;}
      to {left:200px;}
    `, 'childs'); // 自定义动画名称 cKeyframe 值为 'childs'
    return (
      <div style={{
        animation: `${pKeyframe} 1s`;
      }} >
        <span style={{
          animation: `${cKeyframe} 1s`;
        }}>children</span>
      </div>
    )
  }